[Javascript] 在渲染上反应onClick函数


Answers

而不是调用函数,将值绑定到函数:

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

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

Question

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

  1. 要显示的对象列表
  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函数会触发渲染,以及如何使渲染不成功。