javascript - 如何从reactjs中的按钮将 Prop 传递给函数

Question

我想使用事件处理程序将用户重定向到reactJS中的另一个路由，但我还没有弄清楚如何将其属性传递给事件处理程序函数。

<button onClick={ChallengeActions.OpenChallenge(item.title) }>Start<button>

这就是我的事件监听器的样子

onOpenChallenge: function(url) {

    window.location.href = url;
}

问题是，每当我加载页面时，该函数就会自动启动，而不是等待事件处理程序，我还收到以下错误。

Uncaught Error: Invariant Violation: Expected onClick listener to be a function, instead got type object

Answer 1

您需要注意以下事项:

1. 事件处理程序需要映射到函数:

<button onClick={this.onChallengeButtonClicked}>Start</button>

您需要告诉每个按钮它对应于哪个项目:

<button item={item} onClick={this.onChallengeButtonClicked}>Start</button>

事件处理函数可以通过访问事件参数来检测哪个按钮项被单击:

onChallengeButtonClicked: function(event) {
    item = event.currentTarget.item;
    window.location.href = item.title;
}