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

Question

当我尝试输入输入元素时，状态不会更新。所以我无法在输入中键入任何内容。我也没有收到错误代码。在句柄更改函数中，当我将其记录到控制台时，文本变量是未定义的。但是值变量会更新我键入的每个字母。但不是作为一个完整的句子，字母只是覆盖了它们自己。

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

我认为你的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 });