提交后如何使用react清除输入答案

【问题标题】：How to clear input after submit with react提交后如何使用react清除输入
【发布时间】：2022-01-18 13:04:52
【问题描述】：

使用按钮提交后如何清除此代码中的输入

export default function Form({addTask}) {
const [taskInp, setTaskInp] = useState("")
return (
    <div>
        <input
            type="text"
            placeholder="Write here"
            onChange={e=>{
                setTaskInp(e.target.value)
            }}
        />
        <button onClick={()=> {
            addTask(taskInp)
        }}>Add Task</button>
    </div>
)}

我很想知道推荐的方法是什么

【问题讨论】：

见stackoverflow.com/questions/46539480/…和stackoverflow.com/questions/43922508/…

标签： reactjs input react-hooks

【解决方案1】：

export default function Form({addTask}) {
const [taskInp, setTaskInp] = useState("")
return (
    <div>
        <input
            type="text"
            placeholder="Write here"
            value={taskInp}
            onChange={e=>{
                setTaskInp(e.target.value)
            }}
        />
        <button onClick={()=> {
            addTask(taskInp)
            setTaskInp("")
        }}>Add Task</button>
    </div>
)}

【讨论】：

【解决方案2】：

您可以在提交表单时重置表单元素。

  const handleSubmit = (event)=>{
    event.preventDefault();
    addTask(taskInp);
    event.target.reset();
  };

  return (
    <form onSubmit={handleSubmit}>
        <input
            type="text"
            placeholder="Write here"
            onChange={e=>{
              setTaskInp(e.target.value);
            }}
        />
        <button type="submit">Add Task</button>
    </form>
  );

【讨论】：

谢谢，有分拣机的方法吗
这违背了 react 鼓励的单向数据流范式。理想情况下，您应该重置组件状态并让 react 处理重新渲染。然而，这意味着使输入成为受控组件
您也可以使用 Formik 库。当 onsubmit 表单 formik 有 resetForm 方法。 npmjs.com/package/formik
你的代码每次提交都会重置我的列表
这个stackoverflow.com/a/70362482/17302724解决了我的问题

【解决方案3】：

通常我只是在 onClick 之后重置状态

  <button onClick={()=> {
      addTask(taskInp),
      setTaskInp("")
  }}>Add Task</button>

【讨论】：

谢谢，这种方式行不通
您的答案可以通过额外的支持信息得到改进。请edit 添加更多详细信息，例如引用或文档，以便其他人可以确认您的答案是正确的。你可以找到更多关于如何写好答案的信息in the help center。