我将 2 个值传递给子组件:
- 要显示的对象列表
- 删除功能。
我使用 .map() 函数来显示我的对象列表(如反应教程页面中给出的示例),但是该组件中的按钮会触发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 或更高版本上支持。
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)