REACT中如何修复输入和状态？

Question

具有

const [grade, setGrade] = useState({grade: null,})

const changeHandler = (event) => {if (event.value) {setGrade({ ...grade, [event.name]: event.value })} else {setGrade({ ...grade, [event.target.name]: event.target.value })}}

和输入

<input
                  type="text"
                  name="grade"
                  className="homework-block-main-input"
                  onClick={changeHandler}
                  />

时，当我在输入中打印值时，我有

打印“ 1” 有 ”” 打印“ 12” 有“ 1” 打印“ 123” 有“ 12”

如何解决？

当我在输入中打印值时，我会

打印“ 1” 有 ”” 打印“ 12” 有“ 1” 打印“ 123” 有“ 12”

如何解决？

Answer 1

首先要指出的是 if (event.value) {} 没有意义，因为 event.value 不存在于 event 中，所以它始终是未定义的，第二件事，你应该使用 onChange 代替onClick 事件通常用在按钮中，第三件事，您应该在 useEffect 中执行 console.log 来正确跟踪状态，代码应如下所示：

  const [grade, setGrade] = useState({ grade: '' });

  const changeHandler = (event) => {
    setGrade({ grade: event.target.value });
  };

  useEffect(() => {
    console.log(grade)
  }, [grade]);  

  return (
    <input
      type="text"
      name="grade"
      className="homework-block-main-input"
      onChange={changeHandler}
    ></input>
  );
};