React: [bug] React onChange Synthetic / Proxy event sedang didaur ulang, masalah saat handler di-debounce
Apa perilaku saat ini?
Dikonfirmasi pada 0.14.7 tetapi juga terjadi hari ini di 15.3.2.
https://jsfiddle.net/dimitar/7ktbfetb/
class Foo extends React.Component {
render(){
const handleChange = _.debounce(this.props.onChange, 500);
return <input onChange={handleChange} />
}
}
ReactDOM.render(<Foo onChange={e => console.log(e.target, e)} />, document.querySelector('div'));
berharap untuk mendapatkan e.target , mendapatkan null
tanpa debounce, berfungsi seperti yang diharapkan. https://jsfiddle.net/dimitar/7ktbfetb/1/
mungkin terkait dengan https://github.com/facebook/react/commit/3285d834402a60d241188a1deacf8250b50239cf - untuk https://github.com/facebook/react/blob/master/CHANGELOG.md#react -9
DimitarChristoff
Semua 3 komentar
Bagi siapa pun yang mencari solusi, Anda dapat menggunakan e.persist()
misalnya. return <input onChange={e => handleChange(e.persist()||e)} />
DimitarChristoff
pada 20 Sep 2016
Ini karena cara kerja debounce. Ini akan menggunakan setTimeout untuk mendorong panggilan ke loop acara berikutnya. Seperti yang Anda catat, karena pooling ini berarti React telah mengembalikan event sintetis kembali ke pool dan mereset field. Jika Anda menggunakan debounce atau apa pun yang memerlukan event untuk ada di luar event handler React (misalnya kode async), maka Anda harus bertahan.
Ini adalah desain jadi tidak ada yang bisa dilakukan tentang ini sekarang. Ada beberapa diskusi di #6190 tentang kemungkinan menghapus pooling, yang seharusnya membuat kode Anda berfungsi tanpa tetap eksplisit.
zpao
pada 21 Sep 2016
ini bertentangan dengan prinsip-prinsip reaksi yang ditetapkan untuk mengatasi aliran data, kekekalan, dan menghindari efek samping. Anda meneruskan objek ke komponen tetapi itu hanya snapshot yang harus digunakan dalam loop peristiwa yang sama karena Anda tidak mempercayai GC dan pengguna yang mungkin secara tidak sengaja membuat kebocoran...
padahal itu mungkin ide yang bagus pada saat itu, beberapa dari kita hanya perlu mendukung browser evergreen yang mampu GC yang memadai. mungkin, untuk sementara saat pendekatan ini sedang dipertimbangkan kembali, flag/env var dapat diatur untuk mematikan penyatuan.
DimitarChristoff
pada 21 Sep 2016
Masalah terkait
zpao
·
3Komentar
MoOx
·
3Komentar
varghesep
·
3Komentar
trusktr
·
3Komentar
zpao
·
3Komentar
Komentar yang paling membantu
Bagi siapa pun yang mencari solusi, Anda dapat menggunakan
e.persist()misalnya.
return <input onChange={e => handleChange(e.persist()||e)} />