我将 2 个值传递给子组件:
我使用 .map() 函数来显示我的对象列表(如反应教程页面中给出的示例),但该组件中的按钮会在渲染时触发该onClick函数(它不应该在渲染时触发)。我的代码如下所示:
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 中引入,将在 React 0.13.3 或更高版本上得到支持。
=>