一尘不染

React onClick函数在渲染时触发

javascript

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

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

我使用.map()函数显示对象列表(如在React教程页面中给出的示例中所示),但是该组件中的按钮在onClickrender上触发该函数(不应在渲染时触发)。我的代码如下所示:

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函数在渲染时触发,如何使其不触发?


阅读 869

收藏
2020-05-01

共1个答案

一尘不染

因为您是在调用该函数而不是将函数传递给onClick,所以将该行更改为此:

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

=> 在ES6中引入了一个称为Arrow Function的功能,并将在React 0.13.3或更高版本中得到支持。

2020-05-01