レンダリング中に React の「onClick」関数が起動するのはなぜですか?

React の onClick 関数の早期実行を理解する

React では、レンダリング中に onClick 関数が起動する理由を把握することが重要です。この現象は、子コンポーネントに値を渡すときに発生する可能性があります。

問題:

オブジェクトのリストをマッピングし、map() 関数を使用してそれらを表示する場合、各オブジェクトに関連付けられたボタンは、実行中に onClick 関数を途中で呼び出します。 rendering.

原因:

この問題の鍵は、onClick 関数が渡される方法にあります。提供されているコードでは、次の行がこの動作を担当します。

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

ここで、onClick 属性は括弧を先頭に付けることで関数を直接呼び出します。これは、onClick ハンドラーがすぐに実行され、レンダリング中に関数が実行されることを意味します。

解決策:

途中で実行されるのを防ぐには、関数自体を次の関数に渡す必要があります。 onClick を呼び出す代わりに。これは、ES6 で導入されたアロー関数を使用して実現できます。修正されたコードは次のとおりです:

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

説明:

この行では、アロー関数を使用して、onClick に渡される簡潔な匿名関数を定義します。ボタンをクリックすると、アロー関数は todo オブジェクトを使用してremoveTaskFunctionを呼び出します。このアプローチにより、onClick 関数はレンダリング中ではなく、ボタンがクリックされたときにのみトリガーされるようになります。

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