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中文网其他相关文章！
