React の「onClick」関数がレンダリング時にトリガーされるのはなぜですか?

レンダリング時に起動する React onClick 関数

親コンポーネントからデータを受け取るコンポーネント内で React の onClick 関数を使用するときに、一般的な問題が発生します。 onClick 関数が不適切に定義されている場合、ユーザーのクリック イベントを待たずにレンダリング中に意図せずトリガーされる可能性があります。

問題を理解するために、提供されているコード例を分析してみましょう。

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

問題は onClick イベント ハンドラーにあります。現在、this.props.removeTaskFunction(todo) が直接呼び出されており、レンダリング中に直ちに関数が実行されます。 onClick 関数はボタンがクリックされたときにのみ呼び出される必要があるため、これは望ましい動作ではありません。

この問題を解決するには、関数参照を呼び出すのではなく、関数参照を渡すようにコードを変更する必要があります。

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

アロー関数を使用すると、removeTaskFunction がすぐには呼び出されず、ユーザーのクリック イベントが実行されるまで待機します。アロー関数は ES6 で導入され、React 0.13.3 以降でサポートされています。

以上がReact の「onClick」関数がレンダリング時にトリガーされるのはなぜですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。