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

Question

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

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 中的 prop 名称错误，text 应该是 name:

 const handleChange = event => {
    const { name, value } = event.target;
    setTodo({ ...todo, [name]: value });
  };