Question

我正在尝试幼稚的东西，但它毕竟应该有用。

我必须在我的页面中链接。

<Link to="/detail" className="table-details-btn" onClick={this.addlocalid('J8')}></Link>
<Link to="/detail" className="table-details-btn" onClick={this.addlocalid('E8')}></Link>

点击后我想按给定值设置localStorage。例如J8，E8

addlocalid(localid){
  console.log("Setting VUID To:"+localid);
  localStorage.setItem('vuserid', localid);
}

但它控制台显示：

Setting VUID To:J8
Setting VUID To:E8
Setting VUID To:J8
Setting VUID To:E8

为什么它设定值4次？并且存储在localStorage中的最终值为E8

Answer 1

onClick需要一个Function，而不是函数的结果。当您通过onClick={howOldIs(tony)}时，您实际上正在通过onClick={32}。您需要传递onClick={howOldIs}，告诉React需要调用的内容。当您传递onClick={howOldIs(tony)}时，将在页面加载时评估函数，因此您将获得所有4个console.log。

问题是，你不能以这种方式真正传递参数，所以你可以通过传递一个匿名内联函数来帮助自己，该函数使用你指定的参数调用原始函数。 onClick={() => {howOldIs(tony)}。

简单时间的另一个例子：

myButton.addEventListener('click', howOldIs(tony));

不执行您可能想要执行的操作（除非howOldIs返回函数本身）。所以你必须这样做：

myButton.addEventListener('click', howOldIs);

或者，如果您需要传递参数：

myButton.addEventListener('click', () => {howOldIs(tony)});

我希望这个解释能有所帮助。

单击<link /> - Reactjs设置localStorage

1 个答案: