javascript - 如何停止 React 中条件 JSX 的更改，直到再次单击提交？

Question

解释它有点棘手，这就是我记录下发生的事情的原因。

如您所见，一旦我输入了错误的答案，然后再次使用输入字段，我就会收到正确的消息，而无需点击提交。我知道根据我编写的代码应该会发生这种情况，但我找不到正确的方法。

这是我的代码:

const AdditionMain = () => {
  const [sum, setSum] = useState("");

  const [isSubmit, setIsSubmit] = useState(false);
  const [disabled, setDisabled] = useState(false);
  const randomNum1 = () => {
    let number1 = Math.floor(Math.random() * 50);

    return number1;
  };
  const randomNum2 = () => {
    let number2 = Math.floor(Math.random() * 50);
    return number2;
  };
  const number1 = useMemo(() => randomNum1(), []);
  const number2 = useMemo(() => randomNum2(), []);
  const result = number1 + number2;

  const correctAnswer = <Typography>Correct!</Typography>;
  const wrongAnswer = <Typography>Wrong!</Typography>;
  const enterAnswer = <Typography>Enter your answer!</Typography>;

  const onSubmit = (e) => {
    e.preventDefault();

    setIsSubmit((prevState) => !prevState);
    if (sum === result) {
      setDisabled(!disabled);
    }
  };

  return (
    <>
      <Navbar />
      <Card
        sx={{
          marginTop: 2,
          height: 50,
          display: "flex",
          flexDirection: "column",
          alignItems: "center",
        }}
      >
        <Typography></Typography>
      </Card>
      <Container component="main" maxWidth="xs">
        <Box
          sx={{
            marginTop: 8,
            display: "flex",
            flexDirection: "column",
            alignItems: "center",
          }}
        >
          <Typography>Fill in the box to make the equation true.</Typography>
          <Typography fontSize={28}>
            {number1} + {number2} =
          </Typography>

          <TextField
            inputProps={{ inputMode: "numeric", pattern: "[0-9]*" }}
            onChange={(e) => setSum(parseInt(e.target.value))}
            disabled={disabled}
            type="number"
            value={sum}
            name="sum"
            id="outlined-basic"
            label=""
            variant="outlined"
          ></TextField>

          {!isSubmit || (isSubmit && sum === "") ? (
            <Button onClick={onSubmit} sx={{ marginTop: 1 }} variant="outlined">
              Submit
            </Button>
          ) : isSubmit && sum !== result ? (
            <Button onClick={onSubmit} sx={{ marginTop: 1 }} variant="outlined">
              {" "}
              Try again!
            </Button>
          ) : (
            () => {}
          )}

          {isSubmit && sum === ""
            ? enterAnswer
            : isSubmit && sum !== result
            ? wrongAnswer
            : isSubmit && sum === result
            ? correctAnswer
            : ""}
          {isSubmit && sum === result ? <Button>Try new one</Button> : () => {}}
        </Box>
      </Container>
    </>
  );
};

export default AdditionMain;

Answer 1

使用输入字段时，只需在 onChange 中调用 setIsSubmit(false) 将 isSubmit 的值设置为 false TextField 的 code> 方法如下所示

 ...
      <TextField
        inputProps={{ inputMode: "numeric", pattern: "[0-9]*" }}
        onChange={(e) => {
                    setSum(parseInt(e.target.value));
                    setIsSubmit(false)
                 }}
        disabled={disabled}
        type="number"
        value={sum}
        name="sum"
        id="outlined-basic"
        label=""
        variant="outlined"
      ></TextField>
...