useState 不会改变 React 中的状态答案

【问题标题】：useState doesn't change the state in ReactuseState 不会改变 React 中的状态
【发布时间】：2020-08-17 03:16:18
【问题描述】：

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

我正在通过制作待办事项列表应用程序来练习 React。
当我按 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("");不会改变 txt 的状态。
我该如何解决？

【问题讨论】：

标签： reactjs react-hooks

【解决方案1】：

这不是一个“受控”组件，因为您没有使用input 上的value 属性。

试试

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

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

【讨论】：

很高兴为您提供帮助

【解决方案2】：

您实际上需要将输入值设置为您的状态。

试试类似的东西

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

我希望它有所帮助。

【讨论】：