javascript - 单击 设置 localStorage - Reactjs

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 需要一个函数，而不是函数的结果。当您传递 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)});

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