在傳遞函數引用時反應不更新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

回答

相關問題