React onClick函数在渲染时激发

作者

我将2个值传递给子组件：

  1. 要显示的对象列表
  2. 删除功能

我使用.map（）函数来显示对象列表（如react教程页面中给出的示例），但该组件中的按钮在渲染时触发onClick函数（不应在渲染时触发）。我的代码如下所示：

module.exports=React.createClass({
render:function（）{
var taskNodes=this.props.todoTasks.map（函数（todo）{
返回(
&lt；div&gt；
{todo.task}
&lt；button type=“submit”onClick={this.props.removeTaskFunction（todo）}&gt；submit&lt；/button&gt；
&lt；/div&gt；
);
}，这个）；
返回(
&lt；div className=“todo任务列表”&gt；
{taskNodes}
&lt；/div&gt；
);
}
});

我的问题是：onClick函数为什么会在渲染时启动，以及如何使其不启动

因为您正在调用该函数而不是将该函数传递给onClick，所以将该行更改为：

&lt；button type=“submit”onClick={（）=&gt；{this.props.removeTaskFunction（todo）}&gt；提交&lt/按钮&gt；

=&gt称为箭头函数，该函数在ES6中引入，将在React 0.13.3或更高版本上得到支持

相关文章：

  1. 使用React路由器以编程方式导航
  2. 您是否可以在不调用setState的情况下强制React组件重新加载？
  3. 未捕获错误：不变冲突：元素类型无效：应为字符串（用于内置组件）或类/函数，但得到：对象
  4. 使用es6类时，React中的“super（）”和“super（props）”有什么区别？

发表评论

© 2026 开发百科-程序代码问答平台 • Built with