1 00:00:02,260 --> 00:00:07,540 Jadi untuk itu seperti yang disebutkan, saya kembali ke proyek yang kami kerjakan dan tentu saja 2 00:00:07,540 --> 00:00:09,640 sekarang layar edit produk di sini 3 00:00:09,640 --> 00:00:16,060 adalah apa yang saya tertarik, ini adalah layar di mana saya memiliki input teks ini di sini dengan label saya 4 00:00:16,060 --> 00:00:19,540 dan kemudian input teks, di mana saat ini kami memiliki 5 00:00:19,540 --> 00:00:25,390 penanganan input yang sangat dasar, kami setidaknya mengambil input pengguna dan menyimpannya dengan bantuan status Bereaksi, dengan menggunakan 6 00:00:25,450 --> 00:00:26,460 status kait, 7 00:00:26,560 --> 00:00:30,200 kami kemudian memasukkan nilai Android kembali ke input dan hanya itu. 8 00:00:30,310 --> 00:00:37,210 Ini memungkinkan kami untuk menangkap dan menggunakan input pengguna tetapi untuk satu, kami dapat meningkatkan cara kami melakukannya, kami dapat menulis 9 00:00:37,210 --> 00:00:42,730 ini dengan cara yang lebih dapat digunakan kembali dan kami tidak melakukan validasi apa pun, jadi 10 00:00:42,760 --> 00:00:46,510 ini adalah hal-hal yang ingin saya ubah dalam modul ini. 11 00:00:46,530 --> 00:00:50,850 Selain itu, kami juga tidak mengonfigurasi input kami dengan cara apa pun, yang 12 00:00:50,940 --> 00:00:53,850 berarti bahwa saat ini semua input teks sama. 13 00:00:53,850 --> 00:00:57,140 Kami tidak mengubah jenis keyboard yang kami 14 00:00:57,270 --> 00:01:02,910 sajikan, kami tidak menawarkan input multiline misalnya untuk teks yang lebih panjang seperti di 15 00:01:02,910 --> 00:01:08,370 sini untuk deskripsi, tidak ada yang terjadi dan karena itu mari kita mulai dengan 16 00:01:08,370 --> 00:01:15,120 mengkonfigurasi input ini sebelum melanjutkan untuk validasi dan sebagainya. Salah satu konfigurasi penting yang dapat Anda tambahkan ke 17 00:01:15,180 --> 00:01:21,420 keyboard Anda adalah jenis keyboard. Jenis keyboard prop dapat diatur dan di sana Anda memiliki beberapa nilai yang tersedia. Sekarang Anda punya cukup banyak nilai 18 00:01:21,420 --> 00:01:26,970 di sini, tetapi dokumen resmi juga merupakan tempat yang harus Anda konsultasikan ketika memikirkan jenis yang ingin Anda 19 00:01:26,970 --> 00:01:33,230 tetapkan di sini karena ketika mengunjungi dokumentasi input teks resmi, Anda tentu saja melihat beberapa contoh tetapi kemudian Anda juga 20 00:01:33,230 --> 00:01:38,270 melihat semua alat peraga yang Anda miliki dan di sana, Anda dapat mempelajari lebih lanjut tentang 21 00:01:38,270 --> 00:01:41,450 masing-masing alat peraga dan bagaimana Anda dapat mengonfigurasinya dan untuk 22 00:01:41,450 --> 00:01:46,010 jenis papan ketik misalnya, kami mengetahui bahwa hanya jenis ini yang didukung lintas platform. 23 00:01:46,160 --> 00:01:52,080 Jadi, sementara kami memiliki jenis iOS dan Android tertentu, jenis ini hanya dapat digunakan bersama dengan pemeriksaan platform 24 00:01:52,130 --> 00:01:53,750 sehingga Anda memastikan Anda tidak 25 00:01:53,750 --> 00:01:58,310 menggunakan jenis di Android yang tidak didukung di sana dan yang karenanya tidak 26 00:01:58,310 --> 00:01:59,560 akan memiliki efek. 27 00:02:00,230 --> 00:02:06,430 Oleh karena itu, saya akan tetap berpegang pada tipe lintas platform, sehingga saya tidak perlu menambahkan pemeriksaan platform tambahan dan di sana, biasanya untuk 28 00:02:06,440 --> 00:02:11,600 katakanlah teks normal, kami akan tetap menggunakan default yang tentu saja karena itu adalah jenis yang kami tidak lakukan. harus 29 00:02:11,600 --> 00:02:18,110 menetapkan tetapi itu misalnya berubah ketika kita melihat input harga kami. Di sana saya ingin memastikan bahwa orang hanya memasukkan angka yang 30 00:02:18,110 --> 00:02:24,860 valid, bahwa mereka tidak memasukkan teks apa pun dan oleh karena itu tentu saja saya ingin menunjukkan keyboard yang tepat untuk membantu 31 00:02:24,860 --> 00:02:27,850 mereka dalam hal ini dan jika kita melihat pada dokumentasi 32 00:02:28,130 --> 00:02:33,170 resmi, kita melihat bahwa ada tiga jenis lintas platform utama dari keyboard yang dapat kami tampilkan 33 00:02:33,350 --> 00:02:40,460 - angka, pad desimal, dan numerik, dan di sana misalnya desimal pad adalah input yang memungkinkan pengguna untuk memasukkan angka desimal yang persis seperti 34 00:02:40,460 --> 00:02:46,250 yang saya inginkan di sini untuk harga saya. Jadi karena itu mengatur jenis keyboard ini di 35 00:02:46,250 --> 00:02:50,660 sini sangat masuk akal karena sekarang jika kita melihat input harga 36 00:02:51,080 --> 00:02:58,460 ini di sini dan saya mengaktifkan soft keyboard yang dapat Anda lakukan dengan pintasan perintah k di sini di iOS 37 00:02:58,520 --> 00:03:07,340 atau dengan menu perangkat keras di sana, kemudian keyboard, matikan perangkat lunak keyboard, Anda melihat bahwa sekarang saya punya keyboard desimal ini membuka di 38 00:03:07,340 --> 00:03:12,860 sini sedangkan pada input lainnya, saya memiliki keyboard teks normal dan tentu saja, itu 39 00:03:13,220 --> 00:03:14,750 sama di Android. 40 00:03:14,750 --> 00:03:20,590 Jika kita pergi ke admin di sana dan kemudian melihat harganya, kita juga melihat bahwa di sana, kita 41 00:03:20,590 --> 00:03:26,200 dihadapkan dengan input ramah angka ini, bukan keyboard teks normal yang kita dapatkan di bidang input lainnya. 42 00:03:26,480 --> 00:03:33,840 Jadi ini adalah bagaimana kita dapat mengkonfigurasi ini dan ini tentu saja merupakan konfigurasi yang penting. Kami juga dapat mengonfigurasi hal-hal lain, 43 00:03:34,010 --> 00:03:38,840 misalnya di sini pada input judul di sini. 44 00:03:39,060 --> 00:03:43,950 Jika Anda menekan ruang kontrol dan Anda melihat pelengkapan otomatis, Anda melihat ada banyak hal yang dapat 45 00:03:43,950 --> 00:03:49,560 Anda konfigurasi, misalnya apakah ini harus dikapitalisasi secara otomatis. Di sana Anda memiliki nilai yang berbeda 46 00:03:49,560 --> 00:03:55,590 yang dapat Anda tetapkan, misalnya karakter yang harus ditulis dengan huruf besar, hanya kalimat atau kata-kata 47 00:03:55,590 --> 00:04:01,020 penuh dan di sini, saya akan menggunakan kalimat lengkap misalnya untuk membantu dengan memanfaatkannya. 48 00:04:01,140 --> 00:04:07,350 Anda juga dapat mengaktifkan koreksi otomatis dan dengan menambahkannya seperti ini, Anda memastikan bahwa koreksi otomatis diaktifkan untuk 49 00:04:07,350 --> 00:04:12,540 input ini, dengan mengaturnya ke false, Anda dapat menonaktifkannya atau dengan hanya menghilangkannya tentu saja, 50 00:04:12,540 --> 00:04:18,120 itu juga merupakan opsi dan seterusnya. . Ada banyak hal yang dapat Anda konfigurasi dan 51 00:04:18,120 --> 00:04:23,730 saya akan sangat menyarankan agar Anda selalu melihat dokumen resmi juga untuk mempelajari tentang opsi konfigurasi yang tersedia 52 00:04:23,790 --> 00:04:25,930 dan apa yang mereka lakukan, juga 53 00:04:25,980 --> 00:04:32,400 hanya bermain-main dengan mereka sehingga Anda mendapatkan ide untuk apa yang dapat Anda lakukan di sana dan apa yang dilakukan 54 00:04:32,400 --> 00:04:40,090 setiap opsi dan apa yang mungkin masuk akal untuk aplikasi Anda berikutnya. Satu nilai lain yang ingin saya tetapkan misalnya 55 00:04:40,090 --> 00:04:42,580 adalah jenis kunci kembali. 56 00:04:42,580 --> 00:04:44,920 Ini dapat diatur ke beberapa nilai dan 57 00:04:44,980 --> 00:04:50,350 lagi jika Anda memeriksa dokumen resmi, Anda akan belajar bahwa tidak semua nilai tersedia di semua 58 00:04:50,440 --> 00:04:56,260 platform, hanya lima ini yang tersedia lintas platform dan di sana, Anda pada dasarnya dapat mengkonfigurasi tombol ini 59 00:04:56,260 --> 00:05:00,130 di bagian bawah pojok kanan. Jika Anda melihat input Anda di 60 00:05:06,070 --> 00:05:12,090 sini dan Anda mengklik salah satu input, tombol ini di sini di sudut kanan bawah yang mengatakan kembali 61 00:05:12,090 --> 00:05:15,950 di sini untuk imageUrl. Sekarang pada judul, saya mengaturnya ke depan, jadi 62 00:05:15,960 --> 00:05:21,870 jika Anda mengklik ke bidang judul, sekarang Anda lihat di sini ia mengatakan lebih luas, yang merupakan bahasa Jerman untuk selanjutnya dan 63 00:05:21,870 --> 00:05:27,770 ini hanya karena saya memiliki emulator Jerman di sini dan biarkan saya juga me-restart ini di Android karena macet di sana sehingga 64 00:05:27,770 --> 00:05:29,660 saya bisa menunjukkannya di sana juga. 65 00:05:30,730 --> 00:05:36,280 Jika kita masuk ke input kita di sana, klik pada judul, Anda melihat tombol selanjutnya di sini, 66 00:05:36,280 --> 00:05:41,080 pada imageUrl, Anda memiliki tombol selesai di sini dan itu dapat dikonfigurasi dengan jenis kunci 67 00:05:41,080 --> 00:05:47,020 kembali, meskipun perlu diketahui bahwa ini hanya mengontrol bagaimana ini ditampilkan, apa yang tertulis di sana, apa label di 68 00:05:47,020 --> 00:05:49,150 sana atau jenis tombol apa yang disajikan, 69 00:05:49,300 --> 00:05:55,150 itu tidak secara otomatis mengubah apa yang dilakukan tombol ini, misalnya jika saya mengklik tombol yang lebih luas, 70 00:05:55,150 --> 00:05:56,200 keyboard ini 71 00:05:56,200 --> 00:05:59,990 tertutup, hal yang sama berlaku jika Saya klik tombol kembali di sini. 72 00:06:00,150 --> 00:06:05,040 Sekarang ketika kita berbicara tentang perilaku input teks, maka semua acara yang dapat kita dengarkan menarik. 73 00:06:05,340 --> 00:06:09,190 Dengan on, Anda mendapatkan gagasan tentang semua acara yang dapat 74 00:06:09,210 --> 00:06:15,350 Anda dengarkan dan misalnya Anda dapatkan di Blur yang menyala setiap kali input kehilangan fokus, onChange akan menyala, sehingga 75 00:06:15,420 --> 00:06:21,090 pada setiap penekanan tombol dan memberi Anda acara input penuh, onChangeText yang juga menyala pada setiap keystroke 76 00:06:21,150 --> 00:06:25,230 tetapi hanya memberi Anda teks yang dimasukkan yang biasanya lebih Anda sukai. 77 00:06:25,980 --> 00:06:35,000 onEndEditing di mana kita juga bisa mendapatkan ide kapan ini menyala, jadi jika saya masuk onEndEditing di sini, mari kita lihat ketika 78 00:06:35,010 --> 00:06:37,440 ini dicetak di konsol, jika 79 00:06:37,440 --> 00:06:46,710 saya sekarang pergi ke sini untuk input saya dan harap dicatat saya pada input judul, jadi jika Saya mengetik tes di sana, kita melihat 80 00:06:46,710 --> 00:06:49,350 itu tidak menyala di sini, jika saya 81 00:06:49,350 --> 00:06:54,930 klik dari ini, sekarang itu dipecat diEndEditing. Hal yang sama berlaku jika saya mengklik tombol yang 82 00:06:54,930 --> 00:07:01,920 lebih luas di sini misalnya, jadi pada dasarnya setiap kali kita meninggalkan keyboard ini dengan fokus atau secara umum ketika kita mengklik tombol 83 00:07:01,920 --> 00:07:03,890 yang dilakukan di sana juga. 84 00:07:03,960 --> 00:07:10,620 Selain itu, kami juga memiliki pendengar lain, seperti onFocus yang jelas menyala ketika input ini mendapatkan fokus 85 00:07:10,620 --> 00:07:19,640 atau juga pada SeleksiChange ketika kami memilih teks di sana atau diSubmit Mengedit yang dipecat ketika tombol kembali ini diklik, jadi jika saya 86 00:07:19,640 --> 00:07:21,860 menambahkan onSubmitEditing di sini, ketika 87 00:07:21,860 --> 00:07:30,820 saya tambahkan pendengar ini juga dan juga tambahkan pernyataan log konsol, Anda melihat bahwa sekarang ini akan menyala, setiap kali saya mengetik di 88 00:07:30,820 --> 00:07:37,820 sini, tidak memecat, setiap kali saya klik dari sini, itu juga tidak menyala, kami hanya mendapatkan onEndEditing login 89 00:07:37,960 --> 00:07:39,130 di sini 90 00:07:39,130 --> 00:07:45,600 tetapi akan menyala jika saya menekan tombol yang lebih luas di sini, di sana Anda melihat onSubmitEditing, 91 00:07:45,610 --> 00:07:47,290 jadi ini adalah pendengar 92 00:07:47,290 --> 00:07:52,870 yang akan Anda gunakan untuk mendengarkan ketika kunci kembali diklik dan kemudian Anda dapat 93 00:07:52,870 --> 00:07:59,230 melakukan apa pun yang ingin Anda lakukan, seperti mengirimkan Anda data atau secara otomatis memindahkan fokus 94 00:07:59,230 --> 00:08:03,090 ke input berikutnya dengan bantuan referensi misalnya jika Anda mau. 95 00:08:03,200 --> 00:08:08,240 Ini adalah bagaimana Anda dapat mengkonfigurasi ini dan seperti yang saya katakan, saya akan merekomendasikan Anda 96 00:08:08,240 --> 00:08:10,370 menyelami ini untuk mendapatkan perasaan bagaimana 97 00:08:10,400 --> 00:08:16,160 ini bekerja, saya sekarang akan pindah namun dan saya ingin memastikan bahwa kami tidak hanya mendengarkan masukan dan 98 00:08:16,160 --> 00:08:19,460 menyimpan nilai tetapi kami juga memvalidasi apa yang dimasukkan pengguna.