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

Question

我有一个表单，当我点击提交按钮时，数据被提交到服务器。
现在，将数据提交到服务器后，我需要将表单数据清空。
除了下拉值之外，每个字段都变得清晰。这里的问题是什么？？

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状态值到 value select的 Prop 元素。

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