在 React js 中使用 AvForm 重置表单

Question

我在 React js 中使用 AvForm。我想在提交表单后重置表单。但是除非刷新整个页面，否则我无法重置代码。每当表单提交时，它都会保留旧值但不会重置字段

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

我需要帮助。先感谢您。我需要一些建议

Answer 1

您可以从 AvForm 获取 ref 并使用 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
    )
  }
}

Answer 2

Hassam 使用状态的概念并在需要时将状态设置为空，并将该状态分配给字段属性的值

在 React js 中使用 AvForm 重置表单

Reset form using AvForm in react js

javascript

reactjs

forms

react-forms