Question

有人可以向我解释为什么当我试图将onClick动作绑定到元素时它工作正常，直到我不添加括号来传递参数到函数？

getUser(id) {
    console.log(id);
}

renderResults(){
        if (typeof this.props.results[0] == 'undefined') {
            return null;
        } else {
            var results = this.props.results[0].payload;
            var formatedResults = results.map((singleResult) => {
                return (
                    <div className="col-md-4 single-result" key={singleResult.account_id} onClick={this.getUser(singleResult.id)}>
                        <div>{singleResult.nickname}</div>
                    </div>
                )
            });
            return formatedResults;
        }
    }

该代码在加载而不是单击时工作，并且只在加载页面时返回x控制台日志而不是当我单击元素时，但是当我删除括号并且我在控制台中记录静态文本时，它在getUser函数中运行良好。

任何帮助或有用的链接？感谢

Answer 1

onClick={(e) => this.getUser(singleResult.id)}

doc：https://reactjs.org/docs/handling-events.html#passing-arguments-to-event-handlers

Answer 2

这是因为你正在调用该函数，而不是将其传递给onclick。

你可以使用箭头函数将值绑定到函数，如果你没有传递任何东西，那么它将保持其状态：

getUser = () => {
   console.log(this);
}

onClick={this.getUser}

或者在您的情况下将函数传递给onclick：

onClick={(e) => this.getUser(singleResult.id)}

您可以阅读所有相关内容here

Answer 3

我们有不同的方法将事件绑定到您反应中的DOM元素。

最常用的方法之一是使用＆＃39; bind＆＃39;
另一个是使用箭头功能。
使用公共类字段语法

在您的方案中，您通过this.getUser(singleResult.id)直接调用您的函数。这将执行该方法，而不是将其绑定到您的DOM元素。

尝试将其更改为this.getUser.bind(this, singleResult.id)，应将singleResult.id传递给您的方法。

另一种方法是使用onClick={(e) => this.getUser(singleResult.id)}

之类的箭头功能

但是在使用箭头函数时要小心，因为在某些情况下可能会有不必要的组件渲染。

请务必查看documentation，了解有关事件处理的详细信息

Answer 4

使用构造函数绑定函数。在组件内部使用。以及所有代码

constructor(props) {
            this.getUser = this.getUser.bind(this);
        }

REACT：绑定功能仅在单击时运行

4 个答案: