在输入元素上键入时，我的状态未更新

Question

当我尝试输入输入元素时，状态不会更新。所以我无法在输入中输入任何内容。我也没有收到错误代码。在 handleChange 函数中，当我将它记录到控制台时，文本变量是未定义的。但是 value 变量会更新我输入的每个字母。但不是作为一个完整的句子，这些字母只是覆盖了它们自己。import React, { useState } from "react";function AddTodo(props) {  const initialFromState = { text: "", isComplete: null, id: null };  const [todo, setTodo] = useState(initialFromState);  const handleSubmit = e => {    e.preventDefault();    if (!todo.text) return;    props.AddTodo(todo);    setTodo(initialFromState);    console.log(todo);  };  const handleChange = event => {    const { text, value } = event.target;    setTodo({ ...todo, [text]: value });  };  return (    <div className="container mx-auto text-center">      <form onSubmit={handleSubmit} className="rounded flex">        <input          className="shadow appearance-none border rounded w-full py-2 mr-4 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline"          type="text"          name="text"          value={todo.text}          onChange={handleChange}          autoComplete="off"          autoFocus={true}          placeholder="Eg. Buy apples"        />        <button          type="submit"          className="bg-blue-500 hover:bg-blue-700 text-white font-bold px-4 rounded focus:outline-none focus:shadow-outline"        >          Add        </button>      </form>    </div>  );}export default AddTodo;我希望我在输入中输入的内容存储在状态中，并且我可以看到我正在输入的内容。下一个挑战是查看待办事项是否实际存储并显示在其他待办事项中。:) 一步到位。

Answer 1

我认为您的 .prop 名称有误handleChange，text应该是name：

 const handleChange = event => {

    const { name, value } = event.target;

    setTodo({ ...todo, [name]: value });

  };

Answer 2

它应该是name，你没有文本属性来定位它。

name='text' 属性给定使用。

    const { name, value } = event.target;

    setTodo({ ...todo, [name]: value });