为什么我的 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中文网其他相关文章！