如何重置表单提交时的下拉值，其他输入值在React Hooks中被清除

Question

我有一个表单，当我点击提交按钮时，数据就会提交到服务器。现在，在数据提交到服务器后，我需要将Form数据清除为空。除Dropdown值外，每个字段都将清除。这里的问题是什么？？

const Form = () => {
const [data, setdata] = useState({
"UserName" : "",
"PhoneNumber" : "",
"email" : "",
"dropDown" :"",
})

const [update, setUpdate] = useState([])

const handleChange =(e)=>{
setdata({...data,[e.target.name]:e.target.value});

}

const handleSubmit=(e)=>{
e.preventDefault();
// setUpdate({...data,update});
// console.log(data);
axios.post('url',data).then((res)=>{
//   console.log("user added successfully");
handleClear();      
})

}

所以，在这里我编写了清除表单的函数，并在提交表单后调用了该函数

const handleClear=()=>{
let clear={
"UserName" : "",
"PhoneNumber" : "",
"email" : "",
"dropDown" :"",
}
setdata(clear);
}

return (
<React.Fragment>
<h1>LordShiva</h1>
<div className="container mt-3">
<div className="row">
<div className="col-md-6">
<div className="card">
<div className="card-header bg-success text-white">
<h4>Form</h4>
<form>
<div className="form-group">
<input type="text" className="form-control" placeholder='UserName' name="UserName" value={data.UserName} onChange={handleChange} />
</div>
<div className="form-group">
<input name="phone" className="form-control" placeholder='PhoneNumber' name="PhoneNumber" value={data.PhoneNumber} onChange={handleChange} />
</div>
{/* <div className="form-group">
<DatePicker selected={startDate} placeholder='Select Date' />
</div> */}
<div className="form-group">
<input name="email" className="form-control" placeholder='Email' value={data.email} onChange={handleChange} />
</div>
<div className="form-group">
<select name="dropDown" onChange={handleChange} className="form-control" >
<option value=""></option>
<option value="Reactjs">ReactJS</option>
<option value="JS">JavaScript</option>
<option value="csCSSs">CSS</option>
<option value="HTML">HTML</option>
</select>
</div>

<div className="form-row">
<button className="btn btn-cyan" type="button" onClick={handleSubmit}>Submit</button>
</div>
</div>
</form>
</div>
</div>
</div>

</div>
</div>
</React.Fragment >
)
}

Answer 1

将dropdown状态值传递给select元素的value属性。

<select
name="dropDown"
value={data.dropdown} // <-- set value to make a controlled input
onChange={handleChange}
className="form-control"
>
<option value=""></option>
<option value="Reactjs">ReactJS</option>
<option value="JS">JavaScript</option>
<option value="csCSSs">CSS</option>
<option value="HTML">HTML</option>
</select>