在传递函数引用时反应不更新className

我在React中做了一个小例子。我碰到的一个问题是，当我将一个函数引用传递给onClick事件处理函数，并且该事件被执行时，react没有更新组件上的类，也就是说，它没有执行组件中定义的另一个函数。在传递函数引用时反应不更新className

这里的代码，其中的问题是一个片段。整个代码片段可以在这里找到：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> 
); 
}

在上面的代码时，我们通过参考onClick事件不会应用由numberClassName添加类。但是，使用内联函数时问题已解决。

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

有关此问题的任何想法？

在此先感谢。

来源

2017-10-06 virajs0ni

你函数需要一个号码，你传递一个字符串。如果您将其更改为

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

来源

2017-10-06 01:48:43 palsrealm

啊！愚蠢的错误。感谢您指出问题。 – virajs0ni

这是因为event.target.innerText是一个字符串，并且您使用indexOf返回数字类的名字它应该工作。

Accorgind给Mozilla文档约Array.prototype.indexOf：

的indexOf（）比较searchElement使用严格平等阵列的元件（由所使用的相同的方法===或三等于运算符）。

这意味着，它检查类型和平等。

例如：

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

所以，你只需要做到这一点：

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

，你的代码会工作得很好，而不内联函数。

来源

2017-10-06 01:52:52 Jalissa

SelectNumber预计号码类型，但你传递一个字符串类型。 event.target.innerText返回字符串。

只需使用Number构造函数转换字符串即可。

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

来源

2017-10-06 01:56:22

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

const Numbers = (props) => { 


    const handleClick = (event) => { 
    props.selectNumber(parseInt(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> 
); 
}

这里是一个solution fiddle

来源

2017-10-06 01:57:57 paulmorar

在传递函数引用时反应不更新className

回答

相关问题