React: Peringatan saat mengubah jenis dan nilai kolom input

Sepertinya kami menerapkan perubahan prop dengan urutan yang buruk. Logika untuk mendapatkan hak ini dapat dipecahkan secara umum (untuk jenis yang diketahui), tetapi bisa rumit untuk menjadi sempurna jika kita ingin meminimalkan operasi DOM.

Saya terkejut bahwa kasus khusus ini bermasalah karena kode ini harus memastikan bahwa kita selalu menetapkan .type sebelum atribut lain apa pun pada <input> :

https://github.com/facebook/react/blob/0b1fd186855a48dff78987f13466cec1e579b78c/src/renderers/dom/client/wrappers/ReactDOMInput.js#L74

Tidak yakin mengapa itu tidak berfungsi seperti yang dirancang. Tidak sepenuhnya jelas bagi saya apakah jenis pengaturan pertama selalu menyelesaikan kasus seperti ini atau jenis pengaturan pertama hanya akan menyebabkan peringatan yang sama ketika beralih ke arah lain.

(Lihat juga # 2242, yang merupakan sesuatu yang mungkin kami inginkan terjadi tetapi mungkin sulit untuk diterapkan dengan bersih di sistem saat ini. Lebih mudah ketika kami memiliki pembungkus komposit lengkap untuk komponen ini tetapi kami tidak lagi melakukannya. Membuat elemen baru kapan pun perubahan jenis bisa mengejutkan karena itu berarti bahwa ref ke komponen itu berubah selama masa pakai komponen yang tidak pernah kita miliki di tempat lain.)

Solusi termudah di sini adalah menyetel key pada input yang berubah dengan tipe sehingga elemen input baru dibuat saat tipe berubah.

Mungkinkah disebabkan oleh bug pesanan Object.assign V8? Atau apakah ini sebelum 15?

@gaearon ini masih dalam rilis 15

@gurinderhans Browser yang mana? Selain itu, dapatkah Anda memberikan jsfiddle yang menunjukkan masalah tersebut?

@jimfb Ini dia.
Browser: Chrome 50.0.2661.86 (64-bit)
JSFiddle: https://jsfiddle.net/mb90na04/1/

Mengikuti debugger chrome saya menemukan ini:
Ada baris kode ini, https://github.com/facebook/react/blob/master/src/renderers/dom/shared/ReactDOMComponent.js#L829 , yang kemudian melakukan panggilan ke https://github.com/ facebook / react / blob / master / src / renderers / dom / client / wrappers / ReactDOMInput.js # L221 dan kemudian nilai masukan dicoba diubah sementara _updateDOMProperties belum dipanggil untuk memperbarui elemen type atribut, sehingga peringatan dibuat. Setelah _updateDOMProperties dipanggil, type disetel sebelum value , seperti yang diharapkan dan semuanya berjalan sesuai rencana.

_ PS: Tentu saja, menghapus panggilan ke ReactDOMInput.updateWrapper , di dalam switch case menghilangkan peringatan, tetapi ini mungkin diperlukan untuk beberapa kasus lain karena saya juga melihat itu dipanggil jika elemen type adalah textarea ._

Anda dapat memeriksa perubahan jenis, dan tidak menetapkan nilai, atau memperbarui jenis dan kemudian menetapkan nilai di dalam ReactDOMInput.updateWrapper . Saya juga bertanya-tanya mengapa panggilan diperlukan untuk kasus seperti <input> atau <textarea>

Berikut adalah kasus sederhana yang mereproduksi masalah: https://jsfiddle.net/97gr5e65/1/

Tampaknya hanya terjadi jika mengubah dari number menjadi text . Saya juga tidak dapat mereproduksi peringatan di Safari atau Firefox pada OS X. Tampaknya juga tidak dapat menggunakan ReactTestUtils .

Ini adalah bug yang menarik untuk dilihat, jadi saya melakukan beberapa mengaduk-aduk. Pikiran awal saya hanyalah menetapkan type sebelum value di updateWrapper. Apakah ini waras?

https://github.com/facebook/react/compare/master...nhunzaker : nh-input-change-fix? expand = 1

Ini menghilangkan bug, tetapi terlalu sederhana. Rasanya dangkal. Bagaimana menurut anda?

Bisakah kita memindahkan panggilan .updateWrapper bawah panggilan _updateDOMChildren (memisahkannya dari panggilan getNativeProps)? Saya pikir itu solusi terbaik di sini dan sepertinya itu akan berhasil.

Iya. Saya juga bisa mendapatkan liputan tes tentang ini. Nilai dinihilkan oleh DOM ketika jenisnya berubah sehingga nilainya tidak lagi valid, atau jika nilai baru yang ditetapkan tidak valid.

Tidak terkait, cukup keren bahwa JSDOM mengambil ini.

Selesai di https://github.com/facebook/react/pull/7333

Masih terjadi dengan versi 16.4.1