为什么我的 React onClick 函数会在渲染时触发？

React onClick 函数在渲染时触发

创建渲染对象列表的 React 组件时，通常会同时传递对象和函数用于删除它们作为道具。虽然使用 .map() 迭代对象是标准做法，但它可能会导致 onClick 函数在渲染过程中过早触发。

在提供的代码中，问题源于直接调用removeTaskFunction在 onClick 事件处理程序中。这意味着该函数在组件渲染后立即执行，而不是在单击按钮时执行。

解决方案

要解决此问题，应该传递该函数作为 onClick 的箭头函数，确保它不会过早调用。更正后的行应如下所示：

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

ES6 中引入的箭头函数，延迟执行直到调用该函数。在 React 0.13.3 或更高版本中，完全支持箭头函数。通过使用箭头函数，onClick 处理程序只会在实际单击按钮时触发，正如预期的那样。

以上是为什么我的 React onClick 函数会在渲染时触发？的详细内容。更多信息请关注PHP中文网其他相关文章！