无法读取未定义的 属性 'length' - 按 '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>