为什么 onClick 函数会在 React 中的渲染时触发以及如何防止它？

为什么 onClick 函数会在 React 中的渲染时触发以及如何防止它？

传递对象列表和删除函数时到子组件并使用 .map() 函数来显示对象，我们注意到按钮的 onClick 函数在渲染期间触发，这是不应该发生的。

要解决此问题并防止 onClick 函数触发on render:

说明：

在原始代码中，直接调用 onClick 事件处理程序，而不是作为函数的引用传递。这意味着该函数在渲染组件时执行，而不是在单击按钮时执行。

解决方案：

要解决此问题，请使用类似箭头函数so:

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

ES6 中引入的箭头函数允许您定义匿名函数，而无需显式声明 function 关键字。在这种情况下，在单击按钮之前不会调用箭头函数，从而防止 onClick 函数在渲染时触发。

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