大家好,請問以下程式碼
const [curData, setCurData] = React.useState('A');
// 處理輸入
React.useEffect(() => {
let input = document.getElementById("input");
input.addEventListener("keyup", handlerInput);
return () =>{
document.removeEventListener("keyup", handlerInput);
}
}, [])
function handlerInput(event) {
if (event.keyCode === 13) {
event.preventDefault();
console.log(curData);
if (curData === 'A') {
setCurData('B');
} else if (curData === 'B') {
setCurData('A');
}
}
}
上面我是想在input Enter時更改curData值,但我發現在console.log(curData)那邊永遠都是A,但state確實有被更動為B,想請教為什麼以及怎麼解決這種問題呢?
感謝~
React.useEffect(() => {
let input = document.getElementById("input");
input.addEventListener("keyup", handlerInput);
return () =>{
document.removeEventListener("keyup", handlerInput);
}
}, [curData])
在 useEffect 後面的 array 加上 curData
不然 useEffect 只會在初始的時候觸發
gary11159
所以你要使用另外一個 useEffect 來管理 curData 的變更狀態
這樣你應該是要把 console.log(curData)
搬到新的 useEffect
useEffect(() => {
console.log(curData);
}, [curData]);
會更建議你把事件監聽的部分直接搬到 jsx 寫
可以用 看看
<input id="input" value={curData} onKeyDown={handlerInput} />
把useEffect 都遮掉
感謝兩位的幫助,已經順利達到我的目標