单击 <Link /> 设置 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.logs.

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

另一个简单时代的例子：

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

没有做您可能想做的事情（除非 howOldIs 本身返回一个函数）。所以你必须做：

myButton.addEventListener('click', howOldIs);

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

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

希望这个解释能帮到你。

单击 <Link /> 设置 localStorage - Reactjs

Setting localStorage on click of <Link /> - Reactjs

javascript

jquery

reactjs

react-router-v4