Mengapa Fungsi onClick Mencetuskan Render in React dan Cara Mencegahnya?

Mengapa Fungsi onClick Menyala pada Render bertindak balas dan Bagaimana untuk Menghalangnya?

Apabila menghantar senarai objek dan fungsi padam kepada komponen kanak-kanak dan menggunakan fungsi .map() untuk memaparkan objek, didapati bahawa fungsi onClick butang mencetuskan semasa pemaparan, yang tidak sepatutnya berlaku.

Untuk menyelesaikan isu ini dan menghalang fungsi onClick daripada menyala pada paparan:

Penjelasan:

Dalam kod asal, pengendali acara onClick dipanggil terus dan bukannya dihantar sebagai rujukan kepada fungsi. Ini bermakna fungsi itu dilaksanakan apabila komponen dipaparkan, bukannya apabila butang diklik.

Penyelesaian:

Untuk membetulkannya, gunakan fungsi anak panah seperti jadi:

<button type="submit" onClick={() => { this.props.removeTaskFunction(todo) }}>Submit</button>

Fungsi anak panah, yang diperkenalkan dalam ES6, membolehkan anda mentakrifkan fungsi tanpa nama tanpa perlu mengisytiharkan kata kunci fungsi secara eksplisit. Dalam kes ini, fungsi anak panah tidak dipanggil sehingga butang diklik, menghalang fungsi onClick daripada menyala semasa render.

Atas ialah kandungan terperinci Mengapa Fungsi onClick Mencetuskan Render in React dan Cara Mencegahnya?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!