我在 React js 中使用 AvForm。我想在提交表單后重置表單。但是除非我重繪 整個頁面，否則我無法重置代碼。每當表單提交時，它都會保留舊值但不會重置欄位
表單.js
<AvForm
className="form-horizontal"
onValidSubmit={(e, v) => {
const data = { ...formData, ...v };
setFormData({ ...data });
dispatch(
createMarketplaceAccount(
{
name: data.name,
access_id: data.access_id,
access_secret: data.access_secret,
marketplace: "amazon",
aws_credentials: {
marketplaces: data.marketplaces.split(","),
},
account_id: getUserInfo().account_id,
informed_api_key: data.informed_api_key,
},
),
);
toggleTabProgress(3);
toggleTab(3);
}}
>
<div className="form-group">
<AvField
name="access_id"
label="Amazon Seller ID:"
value=""
className="form-control"
placeholder="ABC123DE456F78"
type="text"
required
/>
</div>
<div className="form-group">
<AvField
name="access_secret"
label="MWS Auth Token:"
value=""
className="form-control"
placeholder="amzn.mws.123e4567-e89b-12d3-a456-426655440000"
type="text"
required
/>
</div>
<ul className="pager wizard twitter-bs-wizard-pager-link">
<li
onClick={() => {
toggleTabProgress(1);
}}
className="btn btn-primary w-md btn-sm waves-effect waves-light"
>
Previous
</li>
<li className={activeTabProgress === 4 ? "next disabled" : "next"}>
<button type="submit" className="btn btn-primary w-md btn-sm waves-effect waves-light">
Next
</button>
</li>
</ul>
</AvForm>
我需要幫助。先感謝您。我需要一些建議
uj5u.com熱心網友回復：
您可以獲取reffromAvForm并使用reset()
class Whatever extends React.Component {
constructor(props){
super(props);
this.handleValidSubmission = this.handleValidSubmission.bind(this);
}
handleValidSubmission (event, fields) {
// do your thing
this.form && this.form.reset();
}
render() {
return (
<AvForm onValidSubmit={this.handleValidSubmission} ref={c => (this.form = c)}>
...
Your form fields here
...
</AvForm
)
}
}
uj5u.com熱心網友回復：
Hassam 使用狀態的概念，并在需要時將狀態設定為空，并將該狀態分配給欄位的 value 屬性
轉載請註明出處，本文鏈接：https://www.uj5u.com/qita/414178.html
標籤：
上一篇：VueJs鏈接物件中的元素