React で onClick 関数がレンダリング時にトリガーされる理由とそれを防ぐ方法?

React のレンダリング時に onClick 関数が起動する理由とそれを防ぐ方法?

オブジェクトのリストと削除関数を渡すとき子コンポーネントに追加し、 .map() 関数を使用してオブジェクトを表示すると、ボタンの onClick 関数がレンダリング中に発生するはずがないことがわかります。

この問題を解決して、onClick 関数が起動しないようにするにはon render:

説明:

元のコードでは、onClick イベント ハンドラーは関数への参照として渡されるのではなく、直接呼び出されます。これは、ボタンがクリックされたときではなく、コンポーネントがレンダリングされたときに関数が実行されることを意味します。

解決策:

これを修正するには、次のようなアロー関数を使用します。 so:

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

ES6 で導入されたアロー関数を使用すると、関数キーワードを明示的に宣言しなくても匿名関数を定義できます。この場合、ボタンがクリックされるまでアロー関数は呼び出されず、レンダリング時に onClick 関数が起動されなくなります。

以上がReact で onClick 関数がレンダリング時にトリガーされる理由とそれを防ぐ方法?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。