React: Untuk Input Terkontrol, langkah tidak bekerja seperti yang diharapkan kecuali diinisialisasi dengan null atau "".

Dibuat pada 6 Mar 2018 · 6Komentar · Sumber: facebook/react

BUG

Bagaimana perilaku saat ini?
Untuk input type = "number", langkah tidak bekerja seperti yang diharapkan jika ada set nilai awal. Langkah tampaknya hanya diterima jika nilai awal adalah "" atau null.

Contoh:
https://codepen.io/anon/pen/MQMBmX

Contoh ini menggunakan nilai dan langkah pengikatan input yang terkontrol. Langkah adalah 1/10 dari nilai. Jika Anda mengedit nilai dalam kotak teks menjadi 50000 dan menaikkan menggunakan stepper, itu akan bertambah menjadi 50100 (yaitu dengan nilai awal dan bukan dengan langkah saat ini).

Edit kode sehingga nilai awal adalah "" atau nol. Edit kotak teks menjadi 50000 dan tingkatkan - nilainya menjadi 55000 seperti yang diharapkan.

Apa perilaku yang diharapkan?
Dimungkinkan untuk membuat masukan angka yang mengikuti langkah tanpa harus menginisialisasi nilai komponen masukan ke null atau "" terlebih dahulu.

Tampaknya ketika ada nilai awal yang diberikan, itu akan menulis atribut nilai ke dalam DOM (misalnya nilai = "100"). Ketika nilai awal adalah "" atau null maka hanya atribut nilai yang ditulis ke DOM tanpa penetapan. misalnya (nilai).

Versi React mana, dan browser / OS mana yang terpengaruh oleh masalah ini?

16.3.0-alpha.1 (porting ke versi ini untuk mengonfirmasi jika masih menjadi masalah)
0.14.7 (awalnya ditemukan di versi ini)

Tampaknya hanya memengaruhi Chrome (windows dan mac yang dikonfirmasi, versi 59 dan 64). Bug tidak muncul di Safari (setidaknya di mac).

DOM Bug

Sumber

andyboyne

Komentar yang paling membantu

Iya. Sebenarnya saya bertanya-tanya apakah kita harus menyusun jadwal bersama untuk ini.

nhunzaker pada 28 Mar 2018

👍3

Semua 6 komentar

Saya melihat perilaku yang sangat khusus dengan biola ini di Chrome 64 di Windows 10 dan Firefox 52 di Debian. Jika saya mengetik 50000 ke input dan kemudian langsung mengklik panah atas, saya mendapatkan 50100. Jika saya mengetik 50000 ke input, klik di tempat lain di dokumen, lalu klik panah atas, saya mendapatkan 55000.

nmain pada 6 Mar 2018

Anda tidak perlu mengubah nilainya, klik panah atas beberapa kali dan itu mulai berubah menjadi angka yang tidak masuk akal.

jmz7v pada 12 Mar 2018

Terima kasih atas laporannya @andyboyne. Masalahnya berasal dari fakta bahwa kami tidak memperbarui atribut value pada input angka hingga bidang menjadi kabur. Kami melakukan ini untuk menghindari banyak perilaku yang tidak diinginkan terkait dengan validasi browser. cc

Ini harus diselesaikan setelah kami akhirnya berhenti menyinkronkan atribut value untuk input terkontrol https://github.com/facebook/react/issues/11896.

aweary pada 28 Mar 2018

Iya. Sebenarnya saya bertanya-tanya apakah kita harus menyusun jadwal bersama untuk ini.

nhunzaker pada 28 Mar 2018

👍3

Seperti yang disebutkan sebelumnya, ini adalah masalah sinkronisasi, bidang disinkronkan saat bidang dikaburkan.
Jadi saya menambahkan beberapa console.log dan saya menemukan bahwa e.target.value dan e.target.getAttribute ("value") tidak sinkron sementara bidang tidak buram.
Jadi solusinya adalah dengan menambahkan e.target.setAttribute ("value", e.target.value); untuk memaksa memperbarui nilai ini dan kemudian berfungsi seperti yang diharapkan.

       onChange={e => {
        console.log("target" , e.target.value);
        console.log("getAttribute value",  e.target.getAttribute("value"));
        e.target.setAttribute("value",e.target.value); 
        this.setState({value: e.target.value, step: e.target.value / 10});
      }}