useState не меняет состояние в React

Question

[Mycode] (https://codesandbox.io/s/romantic-kowalevski-fp00l?file= / src / App. js)

Я практикую React, создав приложение todo-list.
Мне нужен мой ввод пусто, когда я нажимаю Enter. но это не сработало.

Вот весь мой код:

const Todo = ({ text }) => {
  return (
    <div>
      <span>{text}</span>
    </div>
  );
};

const InputText = ({ addTodo }) => {
  const [txt, setTxt] = useState("");
  const handleSubmit = (e) => {
    e.preventDefault();
    if (!txt) return;
    addTodo(txt);
    setTxt("");
  };
  return (
    <form onSubmit={handleSubmit}>
      <input type="text" onChange={(e) => setTxt(e.target.value)}></input>
    </form>
  );
};

function App() {
  const [todos, setTodos] = useState([]);
  const addTodo = (text) => {
    const newTodos = [...todos, text];
    setTodos(newTodos);
  };
  return (
    <>
      <div className="todo-list">
        {todos.map((val, idx) => {
          return <Todo key={val + idx} text={val} />;
        })}
        <InputText addTodo={addTodo} />
      </div>
    </>
  );
}

строка 17 на ссылке, setTxt (""); не меняет состояние текста.
как я могу это исправить?

Answer 1

Это не «управляемый» компонент, поскольку вы не используете свойство value в input.

Попробуйте

      <input type="text" onChange={e => setTxt(e.target.value)} value={txt} />

https://reactjs.org/docs/forms.html

Answer 2

Вам на самом деле нужно установить входное значение в ваше состояние.

Попробуйте что-то вроде

<Input type="text" onChange={(e) => setTxt(e.target.value)} value={txt}/>

Надеюсь, это поможет.