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

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

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

import React,{useRef} from "react";                               
                                                  
export default function Form(){                                     
 const formRef = useRef(null)
 handleForm = async(event)=>{
  //handle form logic
  ...
  formRef.current.reset();                 
 }
return (
  <>
   <form onSubmit={handleForm}>
    ....
   </form>                                            
  </>                                                 
)
}

这个解决方案基于msfers answer并针对 typescript 用户进行了改进，对我很有效。

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

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