Untuk mengatasi masalah tidak dapat mengetikkan kolom input di React, pastikan untuk menggunakan prop defaultValue alih-alih value untuk kolom input yang tidak terkontrol
Atau, atur prop onChange di lapangan dan tangani acara perubahan
Berikut adalah contoh bagaimana masalah terjadi
const App = () => { return (
); }; export default App;
Masalahnya adalah bidang input_ memiliki set prop value, tetapi tidak memiliki prop onChange yang menangani perubahan pada nilai input
Gunakan prop onChange untuk menyelesaikan masalah
Cara termudah untuk menyiasatinya adalah dengan menggunakan prop onChange untuk menangani peristiwa perubahan pada bidang input
Kami menggunakan prop onChange_ untuk menangani acara perubahan di kolom input. Fungsi defaultValue_1 dipanggil setiap kali nilai bidang berubah
Perhatikan bahwa kami menyimpan nilai input di negara bagian
Pengait dapat diberikan nilai status awal
Jika Anda tidak ingin menggunakan nilai status awal, berikan string kosong ke hookdefaultValue3, e. g. defaultValue4
Sekarang setiap kali pengguna mengetik ke kolom input, fungsi defaultValue1 dipanggil dan menetapkan nilai baru untuk variabel defaultValue6, yang menampilkan ulang kolom input dan menampilkan nilai saat ini
Menggunakan bidang input yang tidak terkontrol
Cara alternatif untuk menangani masalah di mana kita tidak dapat mengetikkan input adalah dengan menggunakan kolom input yang tidak dikontrol
Hook dapat diberikan nilai awal sebagai argumen. Hook mengembalikan objek ref yang dapat diubah yang properti defaultValue8-nya diinisialisasi ke argumen yang diteruskan
Perhatikan bahwa kita harus mengakses properti defaultValue_9 pada objek ref untuk mendapatkan akses ke elemen input tempat kita menyetel prop value1
Saat kami meneruskan ref prop ke suatu elemen, mis. g. value_2, React menyetel properti defaultValue8 dari objek ref ke node DOM yang sesuai
Kait value_4 membuat objek JavaScript biasa tetapi memberi Anda objek referensi yang sama di setiap render. Dengan kata lain, ini adalah nilai objek memoized dengan properti defaultValue8
Perlu dicatat bahwa ketika Anda mengubah nilai properti defaultValue9 dari ref, tidak ada render ulang yang disebabkan
Sekarang setiap kali pengguna mengklik tombol, nilai kolom input dicatat. Pola ini disebut
Perhatikan bahwa kita menggunakan prop defaultValue bukan value. Prop defaultValue_ memungkinkan kita menentukan nilai awal untuk field input
Jika Anda menyetel prop value pada kolom input, Anda juga harus menyetel prop onChange dan menangani peristiwa perubahan, jika tidak, Anda tidak dapat mengetik di kolom input
Untuk ini, Anda perlu menggunakan attr(). Metode attr() dapat digunakan untuk mengambil nilai atribut dari elemen pertama dalam himpunan yang cocok atau menetapkan nilai atribut ke semua elemen yang cocok
Berikut ini adalah kode JavaScript −
Contoh
Demo Langsung
Document _Untuk menjalankan program di atas, simpan saja nama file anyName. html(indeks. html) dan klik kanan pada file tersebut dan pilih opsi buka dengan server langsung di Editor VSCode
Jika nilainya diubah, Firefox, Chrome, dan Safari tidak memperbarui DOM dan elemen penguraian Test Studio tidak mengenali nilai yang diubah. Jika nilai masukan diambil melalui JavaScript, maka semua browser mengembalikan nilai yang benar. Hasil yang benar dikembalikan jika kode berikut dipanggil untuk elemen input teks yang nilainya dimodifikasi. Ini karena nilainya diambil dengan menjalankan JavaScript di browser
browser.Find.ByName("oname").Value;Jika kode di bawah ini yang digunakan, maka hanya nilai awal yang diambil. Ini karena Test Studio menggunakan elemen DOM yang diurai dan DOM tersebut salah
i) Jika Anda menggunakan skrip dalam tindakan klien apa pun, tetapkan satu parameter Keluaran untuk skrip dengan nilai masing-masing yang ditetapkan, dan tetapkan parameter Keluaran itu ke variabel lokal pada langkah berikutnya
ii) Jika Anda meneruskan nilai dari blok web menggunakan peristiwa pemicu, Di pengendali peristiwa layar, tetapkan variabel lokal dengan nilai
Peristiwa change dipicu untuk elemen <input>, <select>, dan <textarea> saat pengguna mengubah nilai elemen. Berbeda dengan peristiwa <label> Choose an ice cream flavor: <select class="ice-cream" name="ice-cream"> <option value="">Select One …</option> <option value="chocolate">Chocolate</option> <option value="sardine">Sardine</option> <option value="vanilla">Vanilla</option> </select> </label> <div class="result"></div> _0, peristiwa change tidak harus dipicu untuk setiap perubahan pada elemen <label> Choose an ice cream flavor: <select class="ice-cream" name="ice-cream"> <option value="">Select One …</option> <option value="chocolate">Chocolate</option> <option value="sardine">Sardine</option> <option value="vanilla">Vanilla</option> </select> </label> <div class="result"></div> 2
Bergantung pada jenis elemen yang diubah dan cara pengguna berinteraksi dengan elemen tersebut, peristiwa ________ 55 ______ menyala pada momen yang berbeda
- Saat elemen <label> Choose an ice cream flavor: <select class="ice-cream" name="ice-cream"> <option value="">Select One …</option> <option value="chocolate">Chocolate</option> <option value="sardine">Sardine</option> <option value="vanilla">Vanilla</option> </select> </label> <div class="result"></div> _4 dicentang atau tidak dicentang (dengan mengklik atau menggunakan keyboard);
- Saat elemen <label> Choose an ice cream flavor: <select class="ice-cream" name="ice-cream"> <option value="">Select One …</option> <option value="chocolate">Chocolate</option> <option value="sardine">Sardine</option> <option value="vanilla">Vanilla</option> </select> </label> <div class="result"></div> 5 dicentang (tetapi tidak saat tidak dicentang);
- Ketika pengguna melakukan perubahan secara eksplisit (mis. g. , dengan memilih nilai dari dropdown <select>_ dengan klik mouse, dengan memilih tanggal dari pemilih tanggal untuk <label> Choose an ice cream flavor: <select class="ice-cream" name="ice-cream"> <option value="">Select One …</option> <option value="chocolate">Chocolate</option> <option value="sardine">Sardine</option> <option value="vanilla">Vanilla</option> </select> </label> <div class="result"></div> 7, dengan memilih file di pemilih file untuk <label> Choose an ice cream flavor: <select class="ice-cream" name="ice-cream"> <option value="">Select One …</option> <option value="chocolate">Chocolate</option> <option value="sardine">Sardine</option> <option value="vanilla">Vanilla</option> </select> </label> <div class="result"></div> 8, dll. );
- Saat elemen kehilangan fokus setelah nilainya diubah. untuk elemen yang interaksi penggunanya berupa mengetik, bukan pemilihan, seperti <textarea> atau body { display: grid; grid-template-areas: "select result"; } select { grid-area: select; } .result { grid-area: result; } 0, body { display: grid; grid-template-areas: "select result"; } select { grid-area: select; } .result { grid-area: result; } 1, body { display: grid; grid-template-areas: "select result"; } select { grid-area: select; } .result { grid-area: result; } 2, body { display: grid; grid-template-areas: "select result"; } select { grid-area: select; } .result { grid-area: result; } 3, body { display: grid; grid-template-areas: "select result"; } select { grid-area: select; } .result { grid-area: result; } 4, atau body { display: grid; grid-template-areas: "select result"; } select { grid-area: select; } .result { grid-area: result; } 5 jenis elemen <input>
Daftar spesifikasi HTML
Gunakan nama peristiwa dalam metode seperti body { display: grid; grid-template-areas: "select result"; } select { grid-area: select; } .result { grid-area: result; } _9, atau setel properti penangan peristiwa
addEventListener('change', (event) => {}); onchange = (event) => { };
const selectElement = document.querySelector('.ice-cream'); selectElement.addEventListener('change', (event) => { const result = document.querySelector('.result'); result.textContent = `You like ${event.target.value}`; }); _0 umum
HTML
<label> Choose an ice cream flavor: <select class="ice-cream" name="ice-cream"> <option value="">Select One …</option> <option value="chocolate">Chocolate</option> <option value="sardine">Sardine</option> <option value="vanilla">Vanilla</option> </select> </label> <div class="result"></div>
body { display: grid; grid-template-areas: "select result"; } select { grid-area: select; } .result { grid-area: result; } _
JavaScript
const selectElement = document.querySelector('.ice-cream'); selectElement.addEventListener('change', (event) => { const result = document.querySelector('.result'); result.textContent = `You like ${event.target.value}`; });
Hasil
Untuk beberapa elemen, termasuk const selectElement = document.querySelector('.ice-cream'); selectElement.addEventListener('change', (event) => { const result = document.querySelector('.result'); result.textContent = `You like ${event.target.value}`; }); _1, peristiwa change tidak diaktifkan hingga kontrol kehilangan fokus. Coba masukkan sesuatu ke bidang di bawah, lalu klik di tempat lain untuk memicu kejadian
HTML
<input placeholder="Enter some text" name="name" /> <p id="log"></p>
JavaScript
const input = document.querySelector('input'); const log = document.getElementById('log'); input.addEventListener('change', updateValue); function updateValue(e) { log.textContent = e.target.value; }
Hasil
Tabel BCD hanya dimuat di browser dengan JavaScript diaktifkan. Aktifkan JavaScript untuk melihat data
Browser yang berbeda tidak selalu setuju apakah peristiwa change harus diaktifkan untuk jenis interaksi tertentu. Misalnya, navigasi keyboard di elemen <select> digunakan untuk tidak pernah mengaktifkan peristiwa change di Gecko hingga pengguna menekan Enter atau mengalihkan fokus dari <select> (lihat bug 126379). Sejak Firefox 63 (Quantum), perilaku ini konsisten di antara semua browser utama