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))
  }

Answer 2

这是因为event.target.innerText是一个字符串，而您使用indexOf来返回数字类名称。

关于Array.prototype.indexOf：

的Mozilla文档的Accorgind

indexOf（）使用strict将searchElement与Array的元素进行比较等式（与===或三等号运算符使用的方法相同）。

这意味着它会检查类型和相等性。

例如：

＆＃13;

console.log("0" == 0); // true
console.log("0" === 0); //false

＆＃13;

所以你只需要这样做：

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

并且您的代码在没有内联函数的情况下也能正常工作。

Answer 3

SelectNumber需要数字类型，但您传递的是字符串类型。 event.target.innerText返回字符串。

使用Number Constructor转换字符串。

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

Answer 4

我认为这是您使用预期的处理程序和变量格式的方式。这是传递函数引用的工作代码：

NpgSqlTransaction

这是solution fiddle

传递函数引用时，不响应不更新className

4 个答案: