React onClick 函数在渲染时触发

IT技术 javascript reactjs button onclick dom-events
2021-01-21 21:01:52

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

  1. 要显示的对象列表
  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函数会在渲染时触发以及如何让它不触发？

6个回答

因为您正在调用该函数而不是将该函数传递给 onClick，所以将该行更改为：

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

=> 称为箭头函数，它是在 ES6 中引入的，将在 React 0.13.3 或更高版本上支持。

非常感谢，这个问题很明显，但我没有注意到，很好的答案！
2021-03-12 21:01:52
@LongNguyen 这就是我要找的！多谢
2021-03-26 21:01:52
你能再解释一下吗？我知道人们一直说这不是最佳实践，但我想通过 () => 完全了解这里发生的事情，我了解箭头函数是什么，但不知道这是什么 () 以及为什么这是不好的？
2021-03-31 21:01:52
@wuno () 是你匿名函数的参数。这里是空的，因为我们没有传入任何参数。想象一下，() 是 function() 的 ()。现在关于为什么在 render() 函数中绑定不是最佳实践是因为在每次渲染时，我们都将函数重新绑定到组件，这可能非常昂贵。
2021-04-01 21:01:52
您也可以避免使用这些箭头函数花括号。我相信这与最佳实践相匹配：onClick={() => this.props.removeTaskFn(todo)}
2021-04-05 21:01:52

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

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

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

恕我直言和许多其他人。与类或绑定相比，您应该更喜欢无状态函数，因为它们会导致您产生不希望的副作用。因此，即使两个答案都正确，我相信一个比另一个更合适。
2021-03-18 21:01:52
不建议在渲染或组件中的任何其他地方直接绑定。绑定应该总是发生在构造函数中
2021-03-21 21:01:52

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

<button type="submit" onClick={function(){removeTaskFunction(todo)}}>Submit</button>
不要在渲染内部的事件调用上使用匿名函数 - 它会触发另一个渲染
2021-03-20 21:01:52

问题在于你如何传递你的函数

目前你没有传递函数而是调用它：

<Button onClick={yourFunction()} />

您可以通过两种方式修复此问题：

<Button onClick={() => yourFunction(params)} />

或者，如果您没有任何参数：

<Button onClick={yourFunction} />
这对我有帮助，谢谢。
2021-04-10 21:01:52

JSX 与 ReactJS 一起使用，因为它与 HTML 非常相似，它让程序员有使用 HTML 的感觉，但它最终会转换为 javascript 文件。

编写一个 for 循环并将函数指定为 {this.props.removeTaskFunction(todo)} 将在触发循环时执行这些函数。

为了阻止这种行为，我们需要将该函数返回给 onClick。

胖箭头函数有一个隐藏的return语句和bind 属性。因此它将函数返回给 OnClick，因为 Javascript 也可以返回函数！！！！！！

利用 -

onClick={() => { this.props.removeTaskFunction(todo) }}

意思是-

var onClick = function() {
  return this.props.removeTaskFunction(todo);
}.bind(this);
其它你可能感兴趣的问题
上一篇如何从另一个数组的所有元素中过滤一个数组 下一篇如何使用引导程序将 ng-repeat 数据拆分为三列