Jadi mari kita mulai menyelesaikan tugas ini.
Mari kita mulai dengan membuat bidang input dengan pendengar perubahan dan mengeluarkan teks di bawah
bidang input.
Saya akan melakukannya dan benar-benar segera setelah pada contoh sebelumnya saya akan meninggalkan pendahuluan penugasan di sini
semua menambahkan elemen garis horizontal menutup diri karena semua elemen X Jael harus berada di.
James X jika Anda tidak memasukkan apa pun di antaranya.
Dan sekarang ada pada elemen input tipe teks begitu saja.
Semua itu menutup diri.
Sekarang ini saja tidak banyak membantu.
Kami tentu saja membutuhkan penangan perubahan dan menjalankan beberapa metode di sana.
Jadi mari kita tambahkan metode ke nama komponen aplikasi kita yang input handler berubah dan lagi gunakan sintaks saya di sini di
mana saya menetapkan fungsi panah ke properti ini.
Di sana saya akan mendapatkan objek acara ini diteruskan ke dalamnya secara otomatis dan kemudian saya ingin menyimpan ini
dalam keadaan.
Jadi saya mengatur negara sebagai properti dan di sana saya hanya akan menambahkan negara bernama input pengguna.
Nama itu sepenuhnya terserah Anda.
Ini akan menjadi string kosong pada awalnya.
Dan di sini di input berubah handler saya ingin memperbaruinya.
Kami telah menetapkan status semua input pengguna sama dengan nilai target akhir sehingga untuk apa pun yang dimasukkan pengguna.
Dan saya sekarang juga akan membuat dua cara mengikat dengan yang tidak hanya terdaftar ini sebagai penangan
di sini input berubah penangan tetapi juga menetapkan nilai yang sama dengan input negara pengguna ini untuk selalu mencerminkan nilai terbaru dalam input dan saya akan
membaginya beberapa baris untuk membuatnya lebih mudah dibaca.
Sejauh ini tidak ada yang istimewa.
Mari kita cepat memeriksa apakah itu berfungsi. Mari kita juga berharap banyak untuk melihat apakah Anda punya kesalahan.
Dan biarkan saya MASUKKAN sesuatu di sini.
Ini berfungsi kita belum selesai meskipun kita harus semua output teks di bawah input.
Jadi saya akan menambahkan paragraf di bawah elemen input saya di sana-sini.
Saya akan menaruh beberapa konten dinamis input pengguna negara ini dengan jelas.
Biarkan saya menyimpan ini juga.
Dan sekarang mari kita coba ini lagi.
Terlihat cukup bagus.
Saya bisa melihat apa pun yang saya masukkan di sini di bawah input.
Maka langkah selanjutnya sekarang adalah membuat komponen baru yang menerima panjang teks bukan hanya
panjang teks sebagai penyangga.
Dan ini hanya komponen validasi nama.
Jadi saya akan melakukan ini saya akan membuat folder baru untuk itu.
Komponen validasi dan tambahkan komponen Dacian atau javascript jatuh di sana.
Sekarang saya sebutkan di video masalah mati Anda tidak perlu menyatakan di sini sehingga tidak perlu menggunakan
kelas dan memperluas komponen.
Kita bisa menggunakan fungsi lagi validasi nama di sini dan saya akan menambahkan beberapa simpai.
Saya ingin mengubah nama meskipun validasi bukan komponen validasi Gaya jaringan yang tidak kami gunakan di
sini.
Jadi validasi saja adalah nama komponen tanpa komponen.
Masih menjalankan konstanta di sini di mana saya menetapkan itu sebagai 6 fungsi.
Dan tentu saja kami akan menerima beberapa alat peraga di sini.
Saya sudah tahu bahwa kemudian saya akan mengimpor tindakan kembali dari reaksi karena kita perlu melakukannya.
Tidak akan melupakan ini.
Anda akan mendapatkan kesalahan tentang cara dan saya akan mengekspor ini sebagai ekspor default saya di file ini.
Sekarang yang tersisa dalam fungsi ini adalah saya harus mengembalikan beberapa JS X solver karena itu
bukan komponen yang valid dan karena itu sekarang akan mengembalikan paragraf di mana saya akan mengatakan teks terlalu pendek.
Tentu saja itu tidak bersyarat sama sekali sekarang.
Mungkin sudah membungkus ini di dalam div di sini.
Jadi mari kita sesuaikan itu.
Maka dengan itu kita mengatur komponen ini.
Sekarang mari kita mengimpor file Baptist js dengan menambahkan port di bagian atas tempat
saya mengimpor validasi dengan validasi D modal dari folder validasi dan file dot js validasi D mereka tanpa ekstensi
file dalam impor.
Sekarang saya dapat menggunakannya di sini di bawah masukan saya di bawah paragraf.
Mungkin saya akan menambahkan validasi sebagai tag penutup sendiri.
Sekarang saya juga harus mengirimkan panjang teks sebagai prompt.
Jadi di sini saya hanya akan menambahkan prop dan saya akan beri nama panjang input.
Nama terserah Anda.
Saya akan menambahkannya seperti apa adanya dan cukup melewati kondisi ini.
Panjang input pengguna karena itu adalah string, itu adalah array, oleh karena itu saya bisa mendapatkan panjang
input dan validasi titik jatuh Jr.
Saya kemudian bisa menggunakannya.
Sekarang itu akan menjadi bagian dari tugas pertama saya harus menampilkan teks menjadi pendek atau teks cukup lama.
Padding pada panjang teks dan Anda dapat memilih warna apa pun jika Anda mau.
Saya akan menggunakan 5 karena saya hanya di sini tapi itu benar-benar opsional.
Jadi di sana saya akan menambahkan paragraf kedua.
Teks saya sudah terlalu pendek.
Satu teks buruk cukup panjang yang hilang dan saya hanya ingin menampilkan satu dari dua.
Sekarang ada beberapa cara Anda bisa melakukan ini.
Cara pertama adalah dengan menggunakan ekspresi ternary seperti yang saya tunjukkan di modul sebelumnya atau di modul
ini sebenarnya di kuliah sebelumnya.
Jadi di sini kita dapat mengatakan jika mungkin panjang input akan ada panjang input Propp karena itulah yang saya sampaikan
di sini.
Panjang input dan ini akan menjadi panjang tebak apa input saya.
Jadi jika itu katakanlah lebih besar dari lima maka saya ingin menampilkan teks cukup lama jika tidak.
Saya ingin menampilkan teks terlalu pendek.
Ini harus bekerja dengan ini mengubah setiap ekspresi.
Pastikan Anda menyimpan semua file dan kembali.
Kita semua melihat teks terlalu pendek.
Sekarang izinkan saya mulai mengetik.
Kami melihat Maxse juta.
Karakter selanjutnya harus berganti teks cukup lama dan jangan pernah menghapus karakter itu kembali ke
teks terlalu pendek.
Ini berfungsi dengan baik, tetapi apa yang saya katakan tentang ekspresi ternary.
Gunakan dengan hati-hati.
Sekarang sebenarnya di sini akan sangat baik untuk menggunakannya.
Ini sederhana untuk memahami blok GSX.
Masih mari kita gunakan pendekatan adonan.
Mari kita buat variabel baru yang akan menamai pesan validasi di mana a secara default akan mengatakan teks cukup
lama.
Namun saya kemudian akan memeriksa apakah panjang input prop lebih kecil atau sama dengan 5.
Jadi saya hanya membiarkan melakukan sebaliknya.
Kemudian saya akan mengatakan pesan validasi ke teks menjadi pendek.
Dan tentu saja saya tidak bisa hanya menetapkan teks untuk itu saya bisa menetapkan seluruh paragraf GSX keduanya
benar-benar berfungsi di sini.
Saya akan pergi dengan teks untuk mencampurnya sehingga di sana saya kemudian akan menambahkan paragraf saya dan di dalam paragraf.
Saya hanya akan menampilkan pesan validasi dan ini adalah teks yang cukup panjang atau teks terlalu pendek.
Dan lagi paragraf bisa menjadi bagian dari variabel juga.
Sekarang katakanlah jika perubahan ini kita harus mendapatkan perilaku yang sama dan kita lakukan.
Namun kali ini di sini kita lakukan.
Tetapi cara yang lebih elegan dengan menyimpannya dalam variabel yang terpisah sehingga membuatnya sedikit lebih mudah untuk
dibaca dan dipahami dan dipelihara.
Jadi ini solusi mereka.
Saya rekomendasikan secara opsional Sekali lagi tidak menggunakan teks di sini.
Buat elemen Agellius X dengan paragraf sebagai gantinya.
Tetapi ini jelas merupakan solusi yang bagus untuk tugas-tugas yang gratis.
Sekarang mari kita lanjutkan dan mari kita buat komponen lain komponen char dan stylesheet sebagai kotak
inline dengan misalnya gaya yang saya sarankan di sini.
Jadi buat folder baru di folder sumber char dan kemudian ada file jenius char bertitik seperti sebelumnya.
Ini tidak perlu memiliki status sehingga kita cukup membuat komponen fungsional yang Anda buat
sebagai fungsi.
Jadi char ada di fungsi enam panah seperti yang kita lakukan berkali-kali sebelumnya.
Kami pasti perlu mengimpor untuk bereaksi seperti biasa karena jazz X hanya bereaksi membuat elemen jangan pernah lupa
dapatkan ini dan kemudian ekspor char sebagai default di file ini.
Sekarang di sana saya sekarang harus mengembalikan beberapa JSE X dan saya benar-benar akan mengembalikan elemen div yang membungkus semuanya.
Sekarang untuk penataannya kita punya dua pilihan.
Kita dapat mengatur file C S S.
Impor itu.
Tentukan kelas di sana dan tetapkan di sini.
Atau tentukan inline Stahl's.
Saya akan memilih gaya inline di sini, tetapi sepenuhnya terserah Anda.
Jadi izinkan saya menyebutkan gaya konstan ini.
Tapi namanya tidak masalah.
Dan sekarang biarkan saya mengatur apa yang saya definisikan di sini jadi saya akan mengatur tampilan ke blok inline.
Saya akan mengatur padding ke 16 piksel dan saya akan mengatur margin ke 6 dan piksel.
Saya akan menetapkan batas 1 piksel solid dan hitam.
Apa lagi yang saya miliki di sini.
Perataan teks ke tengah mungkin untuk memusatkan segalanya dengan baik sehingga perataan teks ke pusat.
Ini mungkin bahkan tidak lebih rapi untuk jujur dan itu akan berfungsi seperti ini harus menjadi unta karena
kita berada di javascript.
Sekarang saya dapat menetapkan ini di sini secara dinamis dengan tanda kutip tunggal.
Jadi sekarang mengacu pada style konstan itu.
Sekarang kita dapatkan.
Apakah komponen menyiapkannya dan kami juga dapat mengimpor file India di mana saya ingin menggunakannya.
Jadi impor Chaar dari slash char dan file anti char chase mereka tanpa ekstensi file.
Tapi tentu saja kami belum menggunakannya.
Kami ingin menggunakannya di sini.
Kami mendapat peringatan bahwa kami sebenarnya tidak menggunakannya.
Kami ingin menggunakannya di sini untuk membuat daftar untuk setiap karakter dalam teks.
Seorang pengguna dimasukkan.
Jadi mari kita lakukan itu saya akan membuat daftar ini di bawah validasi di sini.
Dan sekarang saya bisa menggunakan peta ini.
Meffert di sini.
Tetapi untuk alasan yang sama saya merestrukturisasi validasi dan menarik logika di luar J ketika X blok
saya kembali.
Saya akan melakukannya di sini.
Di sini saya hanya ingin membuat variabel yang saya siapkan sebelum melakukan pernyataan pengembalian.
Jadi di sana saya hanya akan bernama variabel.
Daftar char misalnya dan daftar char hanya bisa berupa konstanta.
Saya tidak akan pernah mengubahnya.
Chairlifts harus menjangkau negara saya ke input pengguna dan sekarang memanggil peta untuk memetakan kembali setiap elemen dalam
keinginan menjadi elemen baru.
Sekarang desiré tentu saja hanya beberapa teks tetapi pada dasarnya adalah serangkaian string.
Jadi di sini saya akan mendapatkan char tunggal saya dan Anda tentu saja dapat juga dinamai char apa pun yang Anda inginkan dan saya
ingin mengembalikan j sebagai representasi x.
Jadi saya akan mengembalikan komponen char saya dan saya akan menetapkan karakter dan nama ini juga terserah Anda.
Menyangga dan lulus karakter yang saya dapatkan di sini
Dan lagi ini bisa dinamai char apa pun yang kamu suka ke dalamnya.
Jadi tidak perlu mengharapkan komponen karakter properti Susie ini di dalam komponen char saya.
Jadi di sana saya akan menerima alat peraga dan sekarang saya hanya akan menampilkan karakter alat peraga di dalam pernyataan kembali di sana
dan kemudian menangkap ya saya cukup membuat daftar saya dengan Tidak dapat bekerja desiré.
Perlu diingat peta tidak menyentuh array asli.
Ini hanya memberi Anda array baru yang disimpan dalam daftar char dan Anda array komponen char.
Sekarang mari kita ambil daftar Jarre konstan dan ini adalah apa yang ingin saya output antara
kawat gigi Cauley tunggal di sana di bawah pesan validasi.
Pastikan semua file disimpan.
Sekarang di sini kita menghadapi masalah mati.
Kami tidak dapat menggunakan peta kata yang string pada dasarnya atau jenis javascript array tetapi tidak benar-benar mengubahnya
menjadi javascript array.
Yang harus saya lakukan adalah panggilan split di atasnya pada input pengguna dan meneruskan string kosong sebagai argumen.
Ini pada dasarnya akan membaginya menjadi array string setelah setiap karakter.
Jadi sekarang ini akan berfungsi jika saya mengikuti tes di sini.
Anda dapat melihat saya mendapatkan tes di sana.
Sekarang yang akan Anda lihat adalah saya mendapatkan kesalahan kunci ini.
Jadi untuk memperbaikinya.
Tentu saja kita harus menetapkan kunci dan di sini masalahnya dengan kunci itu agak rumit karena ID
unik yang tidak kita miliki dalam contoh kita.
Jadi apa yang akan saya lakukan ada di sini di bagan.
Saya memang akan menggunakan indeks meskipun ini tidak optimal.
Lebih baik daripada tidak ada kunci.
Tapi bukan solusi terbaik.
Tapi di sini saya tidak mendapat kesempatan lain.
Jadi mari kita gunakan argumen kedua dari fungsi di dalam peta Meffert indeks dengan itu jika kita sekarang
memuat ulang halaman.
Ini berfungsi tanpa kesalahan.
Sekarang kita hampir selesai.
Sekarang kami ingin memastikan bahwa jika saya mengklik salah satu kotak ini, kami menghapus karakter itu.
Sekarang untuk itu saya akan menambahkan metode baru di pelapor aplikasi saya atau beri nama.
Hapus char handler dan kemudian saya pada dasarnya berharap untuk mendapatkan indeks dari karakter yang ingin saya hapus dan saya ingin menjalankan ini
dengan jelas setiap kali saya mengklik salah satu kotak karakter ini.
Jadi mari kita balikkan ini di beberapa baris dan kemudian meneruskan sebuah properti yang akan saya
namai kumpulkan di mana saya kemudian ingin mengeksekusi tidak menghapus char handler melewati indeks sekalipun dan oleh karena itu jalankan
ini sebagai fungsi E6 anonim menggunakan sintaks alternatif ini lewat referensi.
Ingatlah bahwa fungsi anonim ini pada dasarnya diteruskan untuk diklik dan tidak segera dieksekusi.
Ini akan menjadi masalah jika saya memiliki lebih banyak kurung di akhir.
Tapi di sini kita hanya melewati referensi dan kemudian disfungsi akan dieksekusi ketika properti klik diaktifkan
dan kemudian kita panggil delete handler char.
Jadi mari kita lanjutkan untuk mengumpulkan properti ke char dan ada di diff atau di handler klik dan hanya
meneruskan referensi ke props kumpulkan sehingga ini akan dieksekusi dan karenanya fungsi ini di sini akan
dieksekusi.
Jika saya mengklik kotak dan kemudian kita akan mendapatkan indeks ini.
Sekarang di dalam hapus char handler saya mendapatkan indeks ini.
Saya sekarang ingin memperbarui input pengguna yang seperti yang Anda pelajari hanya jenis string javascript.
Jadi yang akan saya lakukan di sini adalah.
Pertama-tama saya akan mendapatkan teks saya dengan menjangkau negara ini.
Input pengguna dan pembelahan split pada string kosong seperti yang kami lakukan sebelumnya.
Sebelum pemetaan.
Sekarang saya mendapat array karakter dan di sana saya sekarang ingin menghapus satu dengan sambungan pada posisi indeks dan
kemudian hanya satu karakter.
Jadi ini menghapusnya dari array.
Dan sekarang saya ingin membuat pembaruan saya sebagai teks di mana saya hanya menggunakan teks.
Ini adalah array karakter.
Ingatlah hal itu yang sekarang saya gabungkan lagi dengan karakter kosong sehingga pada dasarnya tidak ada apa-apa selain kata-kata.
Array karakter saya menjadi teks menjadi string lagi dan kemudian saya bisa memanggil negara set ini dan di
sana saya dapat mengatur input pengguna sama dengan teks yang diperbarui.
Ini sebenarnya harus dilakukan.
Descaler harus mengambil teks saya diperbarui dan DUDAS untuk karakter apa pun yang saya klik.
Biarkan saya menyimpan ini dan biarkan saya memasukkan teks tes di sini.
Biarkan saya di.
Klik tahun ini dihapus dan juga dihapus dari input dan untuk teks output
di sini dan kemudian jika saya menghapus banyak konten dari sana sebenarnya validasi juga datang terlalu pendek lagi sehingga semuanya
dinamis.
Semuanya berfungsi di sini sebagaimana mestinya dengan rendering bersyarat dan dengan daftar keluaran.