React onClick函数在渲染时触发

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

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

我使用.map()函数来显示我的对象列表(就像在react教程页面中给出的例子一样)，但该组件中的按钮在呈现时触发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函数在渲染和如何使它不火?

当前回答

你没有将函数作为参数传递，而是直接调用它，这就是为什么它会在渲染时启动。

如何解决

有两种方法:

第一个

<Button onClick={() => { 
this.props.removeTaskFunction(todo);
}
}>click</Button>

只需要绑定

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

2021-08-31 21:29:23

其他回答

与其调用函数，不如将值绑定到函数:

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

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

2015-11-21 18:00:57

onClick属性的值应该是一个函数，而不是函数调用。

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

2015-11-21 18:01:16

你没有将函数作为参数传递，而是直接调用它，这就是为什么它会在渲染时启动。

如何解决

有两种方法:

第一个

<Button onClick={() => { 
this.props.removeTaskFunction(todo);
}
}>click</Button>

只需要绑定

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

2021-08-31 21:29:23

有可能实现这一点，甚至比以下方式更具可读性:

<button onClick={() => somethingHere(param)}/>

const Comp = () => {
  const [triggered, setTriggered] = useState(false);

  const handleClick = (valueToSet) => () => {
    setTriggered(valueToSet);
  };

  return (
    <div>
      <button onClick={handleClick(true)}>Trigger</button>
      <div>{String(triggered)}</div>
    </div>
  );
};

与<button onClick={settrigger (true)}/>相比，它不会触发状态setter，也不会导致太多的重渲染如果你没有任何参数要传递给函数，这是可以的。

2021-12-29 12:47:58

你需要使用onClick的箭头函数，以防止立即调用。如果你的按钮是这样的:

<button onClick={yourfunctionname()} />

一定是这样的:

<button onClick={() => yourfunctionname(params)} />

2022-02-28 21:41:52

React onClick函数在渲染时触发

推荐文章

最新文章

标签