React onClick函数在渲染时触发

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函数会在渲染上触发,以及如何使它不成功.

Answer 1

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

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

=> 名为Arrow Function,在ES6中引入,将在React 0.13.3或更高版本上得到支持.

Answer 2

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

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

<Button onClick={yourFunction()} />

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

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

或者如果你没有任何参数：

<Button onClick={yourFunction} />

Answer 3

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

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

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

Answer 4

您需要将箭头函数与 onClick 一起使用，以防止立即调用。所以如果你的按钮看起来像这样：

<button onClick={yourfunctionname()} />

它一定是这样的：

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

Answer 5

onClick属性的值应该是函数,而不是函数调用.

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

Answer 6

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);

Answer 7

对于那些不使用箭头函数但更简单的东西......我在我的 signOut 函数后添加括号时遇到了这个......

替换这个 <a onClick={props.signOut()}>Log Out</a>

有了这个<a onClick={props.signOut}>Log Out</a>……！