为什么在按下键时我的<input>失去焦点

Question

我正在学习ReactJS，并试图创建一个简单的加法程序，该程序由两个部分组成：一个用于问题本身（2个随机数，一个输入字段和一个分数），另一个仅包含“恭喜！”当用户连续输入5个正确答案时出现提示信息。

问题：按下一个键后，我的输入字段失去焦点。

我以前是这样做的（在CS50 beyond tutorial之后，但是这次，我试图使用useState挂钩重新创建它。我相信在每个键之后都会重新渲染我的输入字段，但是我不确定如何修复它。

这就是我所拥有的：

除非我单击它，否则输入栏的预期行为是不会失去焦点。预期结果应为“问题”，然后显示“恭喜！”问题解决5次后。

function App() {
  const [num1, setNum1] = useState(Math.ceil(Math.random() * 10));
  const [num2, setNum2] = useState(Math.ceil(Math.random() * 10));
  const [answer, setAnswer] = useState("");
  const [score, setScore] = useState(0);

  const Problem = () => {
    return (
      <div key={0}>
        {num1} + {num2}
        <br />
        <input
          key={0}
          value={answer}
          onChange={({target}) => setAnswer(target.value)}
          onKeyPress={checkScore}
        />
        <br />
        Score is: {score}
      </div>
    );
  };

  function checkScore(event) {
    ...
  }

  return <Problem />;

  // return score < 5 ? <Problem /> : <Congrats />
}

Answer 1

当状态更改时，您将在每个渲染到<Problem />的每个渲染器上完全创建<App />组件，从而消除了对输入的关注。无需创建和使用组件，只需返回输入字段：

https://codesandbox.io/s/gallant-dream-qxioq

function App() {
  const [num1, setNum1] = useState(Math.ceil(Math.random() * 10));
  const [num2, setNum2] = useState(Math.ceil(Math.random() * 10));
  const [answer, setAnswer] = useState("");
  const [score, setScore] = useState(0);

  // Removed <Problem /> component

  function checkScore(event) {
     ...
  }

  return (
    <div key={0}>
      {num1} + {num2}
      <br />
      <input
        key={0}
        value={answer}
        onChange={({ target }) => setAnswer(target.value)}
        onKeyPress={checkScore}
      />
      <br />
      Score is: {score}
    </div>
  );
}