我将2个值传递给子组件:
我使用.map()函数显示对象列表(如在React教程页面中给出的示例中所示),但是该组件中的按钮在onClickrender上触发该函数(不应在渲染时触发)。我的代码如下所示:
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函数在渲染时触发,如何使其不触发?
因为您是在调用该函数而不是将函数传递给onClick,所以将该行更改为此:
<button type="submit" onClick={() => { this.props.removeTaskFunction(todo) }}>Submit</button>
=> 在ES6中引入了一个称为Arrow Function的功能,并将在React 0.13.3或更高版本中得到支持。
=>