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

レンダリング時に React onClick 関数がトリガーされる: その理由と防止方法

React アプリケーションでは、カスタム コンポーネントの作成にデータと関数の受け渡しが含まれることがよくあります子コンポーネントに。オブジェクトのリストと削除関数を処理する場合、クリック時ではなくレンダリング中に onClick 関数が起動するという問題が発生する可能性があります。

コード例:

次のコードを考えてみましょう:

const TaskList = React.createClass({
  render: function() {
    const tasks = this.props.todoTasks.map(todo => (
      <div>
        {todo.task}
        <button type="submit" onClick={this.props.removeTaskFunction(todo)}>
          Submit
        </button>
      </div>
    ));
    return (
      <div className="todo-task-list">{tasks}</div>
    );
  },
});

問題の説明:

この問題は、コードが単純に渡すのではなく this.props.removeTaskFunction(todo) を呼び出しているために発生します。 onClick への関数。この即時呼び出しにより、レンダリング中に関数が実行されます。

解決策:

この問題を解決するには、次のコードに示すように、アロー関数を使用できます。

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

React のアロー関数:

アロー関数 (() => で示されます)。 {} は、ES6 で導入された簡潔な構文です。これらは React 開発にいくつかの利点をもたらします:

• パフォーマンスの向上: アロー関数を使用すると、コンテキスト バインディングによって引き起こされる意図しない再レンダリングを回避できます。
• 柔軟性: アロー関数は、コールバックまたはイベント ハンドラーとして高階関数に直接渡すことができます。
• 可読性の向上: アロー関数は、明示的なバインド( ) ステートメント。

したがって、onClick ハンドラーをアロー関数に変換することで、ボタンがクリックされたときにのみ削除関数が実行されるようにし、レンダリング中の意図しない実行を防ぐことができます。

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