反应onClick函数触发渲染

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

1. 要显示的对象的列表
2. 删除function。

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

module.exports = React.createClass({ render: function(){ var taskNodes = this.props.todoTasks.map(function(todo){ return ( <div> {todo.task} <button type="submit" onClick={this.props.removeTaskFunction(todo)}>Submit</button> </div> ); }, this); return ( <div className="todo-task-list"> {taskNodes} </div> ); } }); 

我的问题是：为什么我的onClick函数触发渲染，以及如何使它不能。

Answer 1

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

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

=>称为箭头函数，这是在ES6中引入的，并将在React 0.13.3或更高版本上得到支持。

Answer 2

而不是调用函数，将值绑定到函数：

 this.props.removeTaskFunction.bind(this, todo) 

MDN参考： https ： //developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_objects/Function/bind

Answer 3

你的onClick属性的值应该是一个函数，而不是函数调用。

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