无法读取未定义的属性"长度" - 按"Enter"键后，值变为未定义

Question

为什么当我按下Enter键时idNumber是否未定义
如果我点击调用checkID()的button，它会在console.log(idNumber)中显示input的字符串长度

太奇怪了

const [idNumber, setNumber] = useState();
useEffect(() => {
const submit = document.getElementById('idNum');
submit.addEventListener('keyup', enterPressed);
}, []);
const onChangeHandler = (event) => {
const isDigits = event.target.value.replace(/D/g, '');
setNumber(isDigits);
};

const enterPressed = (event) => {
if (event.key === 'Enter') {
console.log('idNumber.length ' + idNumber.length);

}
};
const checkID = () => {
console.log(idNumber.length)
};
<input 
value={idNumber}
id='idNum'
onChange={(event) => onChangeHandler(event)}
/ >
<button onClick={checkID}>  </button>

谢谢大家。

Answer 1

您不应该在React中手动分配事件处理程序，分配onKeyPress的方式与分配onChange的方式相同，它可以按预期工作：

const Comp = () => {
const [idNumber, setNumber] = useState();
const onChangeHandler = (event) => {
const isDigits = event.target.value.replace(/D/g, '');
setNumber(isDigits);
};

const onKeyPress = (event) => {
if (event.key === 'Enter') {
console.log(idNumber);
}
};
const checkID = () => {
console.log(idNumber)
};

return (
<div>
<input 
value={idNumber}
id='idNum'
onChange={(event) => onChangeHandler(event)}
onKeyPress={(event) => onKeyPress(event)}
/ >
<button onClick={checkID}>Btn</button>
</div>
)
}
ReactDOM.render(<Comp />, document.getElementById("root"))

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.13.0/umd/react.production.min.js" integrity="sha256-32Gmw5rBDXyMjg/73FgpukoTZdMrxuYW7tj8adbN8z4=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.13.0/umd/react-dom.production.min.js" integrity="sha256-bjQ42ac3EN0GqK40pC9gGi/YixvKyZ24qMP/9HiGW7w=" crossorigin="anonymous"></script>
<script>
var {
useReducer,
useEffect,
useState,
useRef,
useCallback
} = React
</script>
<div id="root"></div>