Mengapakah Fungsi My React `onClick` Dicetuskan pada Render?

Fungsi React onClick Menyala pada Render

Isu biasa timbul apabila menggunakan fungsi onClick React dalam komponen yang menerima data daripada komponen induk. Apabila fungsi onClick ditakrifkan dengan tidak betul, ia boleh mencetuskan secara tidak sengaja semasa pemaparan dan bukannya menunggu acara klik pengguna.

Untuk memahami isu tersebut, mari kita analisa contoh kod yang disediakan:

var taskNodes = this.props.todoTasks.map(function(todo) {
    return (
        <div>
            {todo.task}
            <button type="submit" onClick={this.props.removeTaskFunction(todo)}>Submit</button>
        </div>
    );
}, this);

Masalahnya terletak pada pengendali acara onClick. Pada masa ini, this.props.removeTaskFunction(todo) sedang dipanggil secara langsung, yang melaksanakan fungsi serta-merta semasa pemaparan. Ini bukan gelagat yang diingini, kerana fungsi onClick hanya boleh digunakan apabila butang diklik.

Untuk menyelesaikan isu ini, kod harus diubah suai untuk lulus rujukan fungsi dan bukannya memanggilnya:

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

Menggunakan fungsi anak panah memastikan removeTaskFunction tidak digunakan serta-merta dan sebaliknya menunggu acara klik pengguna untuk dilaksanakan. Fungsi anak panah telah diperkenalkan dalam ES6 dan disokong dalam React 0.13.3 atau lebih tinggi.

Atas ialah kandungan terperinci Mengapakah Fungsi My React `onClick` Dicetuskan pada Render?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!