提交反应后如何清除输入

Question

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

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>
)}

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

Answer 1

通常我只是在点击后重置状态

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

Answer 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>
  );

Answer 3

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>
)}

提交反应后如何清除输入

How to clear input after submit with react

input

reactjs

react-hooks