React onClick 函数在渲染时触发

javascript dom-events reactjs button onclick

2022-08-30 00:01:12

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

要显示的对象列表
删除功能。

我使用 .map（）函数来显示我的对象列表（如 react 教程页面中给出的示例），但该组件中的按钮在 render 上触发函数（它不应该在渲染时触发）。我的代码如下所示：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

答案 1

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

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

=>称为 Arrow Function，它是在 ES6 中引入的，它将在 React 0.13.3 或更高版本上受支持。

答案 2

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

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

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