我有一個帶有 onClick 函數的按鈕，該函數會增加狀態變量。我正在嘗試添加一個事件偵聽器，以便當用戶按下回車鍵時，它會遵循完全相同的行為。然而，可以觀察到，當用戶按下回車鍵時，似乎多次調用該函數，而不是僅僅一次。我怎樣才能解決這個問題？https://codesandbox.io/s/friendly-gould-bpr7jconst { useState, useEffect } = React;/*export default*/ function App() {  const [value, updateValue] = useState(0);  useEffect(() => {    document.addEventListener("keypress", e => handleKeyPress(e));  }, []);  const onSubmit = () => {    console.log(value);    updateValue(oldVal => (oldVal + 1) % 2);  };  const handleKeyPress = e => {    if (e.key === "Enter") {      onSubmit();    }  };  return <button onClick={() => onSubmit()}>Click me</button>;}ReactDOM.render(<App />, document.getElementById("root"));<div id="root"></div><script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.12.0/umd/react.production.min.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.12.0/umd/react-dom.production.min.js"></script>