javascript - React 在传递函数引用时不更新 className

Question

我正在 React 中制作一个小例子。我遇到的问题之一是，当我将函数引用传递给 onClick 时事件处理程序，并且当执行该事件时，React 不会更新组件上的类，也就是说，它不会执行组件中定义的另一个函数。

这是问题所在的代码片段。完整的代码片段可以在这里找到:https://jsfiddle.net/h6k4um9o/

const Numbers = (props) => {
  const handleClick = (event) => {
    props.selectNumber(event.target.innerText)
  }
  const numberClassName = (number) => {
    if(props.selectedNumbers.indexOf(number) >= 0) {
      return 'selected';
    }
  }

  return (
    <div className="card text-center">
      <div>
        {Numbers.list.map((number, index) =>
        <span key={index} className={numberClassName(number)} 
              onClick={handleClick}>{number}</span>
        )}
      </div>
    </div>
  );
}

在上面的代码中，当我们传递handleClick时引用onClick事件它不会应用 numberClassName 添加的类。但是，使用内联函数时问题就得到了解决。

onClick={() => props.selectNumber(number)}>{number}</span>

对这个问题有什么想法吗？

提前致谢。

Answer 1

您的 handleClick 函数需要一个数字，而您正在传递一个字符串。如果你将其更改为

应该可以工作

const handleClick = (event) => {
    props.selectNumber(Number(event.target.innerText))
  }