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

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 中的道具名称有误，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 });

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

My state is not updating when typing on the input element

javascript

forms

reactjs

react-hooks