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

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：&nbsp;const handleChange = event => {&nbsp; &nbsp; const { name, value } = event.target;&nbsp; &nbsp; setTodo({ ...todo, [name]: value });&nbsp; };

Answer 2

它应该是name，你没有文本属性来定位它。name='text' 属性给定使用。&nbsp; &nbsp; const { name, value } = event.target;&nbsp; &nbsp; setTodo({ ...todo, [name]: value });