reactjs 是否有必要在onClick处理程序中使用匿名回调函数？

lnlaulya 于 2022-11-29 发布在 React

关注(0)|答案(1)|浏览(132)

我目前正在学习的React钩与在线课程。
教师将匿名回调函数传递给onClick处理程序

return (
    <div className="counter">
      <button className="counter-action decrement" onClick={() => decrementScore()}> - </button>
      <span className="counter-score">{score}</span>
      <button className="counter-action increment" onClick={() => incrementScore()}> + </button>
    </div>
  );

但是我不明白为什么需要匿名回调，为什么不能直接传递函数本身。
以下是我尝试过的，它工作正常，没有错误。

const Counter = () => {
  const [score, setScore] = React.useState(0);

  const incrementScore = () => {
    setScore(prevScore => prevScore + 1);
  }

  const decrementScore = () => {
    setScore(prevScore => prevScore > 0 ? prevScore - 1 : 0);
  }

  return (
    <div className="counter">
      <button className="counter-action decrement" onClick={decrementScore}> - </button>
      <span className="counter-score">{score}</span>
      <button className="counter-action increment" onClick={incrementScore}> + </button>
    </div>
  );
}

reactjs

来源：https://stackoverflow.com/questions/74578551/is-it-necessary-to-use-anonymous-callback-function-in-onclick-handler-react

1条答案

按热度按时间

ff29svar1#

这里不需要额外的匿名回调。按你的方式做就可以了。
在以下情况下，拥有这样的匿名回调 * 将 * 非常有用：

被调用的函数是一个对象的成员，它需要一个对象的this上下文，并且函数没有被绑定。例如，在一个类组件中，下面的代码看起来很可疑：

onClick={this.handleClick}

(see here，用于主题的多页）

您希望确保使用特定的一个或多个参数调用函数，而不是使用其他参数。

<button onClick={() => changeValue(1)}>click1</button>
<button onClick={() => changeValue(2)}>click 2</button>

或者，您可能希望省略作为第一个参数传递给事件处理程序的default React event，但是，在本例中，incrementScore或decrementScore中没有使用任何参数，因此这并不重要。
此外，请注意，您只需要使用状态设置器的回调形式，例如：

setScore(prevScore => prevScore + 1);

当封闭函数closes over的状态值可能过时时--如果之前已经调用了状态setter，并且组件还没有重新呈现。但是对于一个只在单击按钮时改变一次的状态，状态值不可能过时。所以，如果你愿意，在这种情况下，你可以简化

const incrementScore = () => {
  setScore(prevScore => prevScore + 1);
}

至

const incrementScore = () => {
  setScore(score + 1);
}

赞(0）回复(0）举报 2022-11-29

我来回答

reactjs 是否有必要在onClick处理程序中使用匿名回调函数？

1条答案

相关问题

热门标签

最新问答