reactjs - 在 ReactJS 中使用 ReduxForm 提交表单后清除表单字段

Question

成功提交表单后，我调用了 destroy() 来清除 redux 表单文档中给出的字段

    result = (values) => {
        const { history } = this.props;
        this.props.dispatch(addVisitors(values)).then(
          (success) => {
            toast.success(success);
            history.push('/visitors');
            this.props.destroy();
          },
          (error) => {
            toast.error(error);
          }
        );
      };

标签： reactjsredux-form

Answer 1

this.props.resetForm()提交成功后，您可以从表单内部调用。

submitMyForm(data) {
  const {createRecord, resetForm} = this.props;
  return createRecord(data).then(() => {
    resetForm();
    // do other success stuff
  });
}

render() {
  const {handleSubmit, submitMyForm} = this.props;
  return (
    <form onSubmit={handleSubmit(submitMyForm.bind(this))}>
      // inputs
    </form>
  );
}

您可以reset()从任何连接的组件进行调度非常灵活，但您必须知道您的表单名称并提供调度。

import {reset} from 'redux-form';

...

dispatch(reset('myForm'));  // requires form name

使用您的代码，我认为您可以使用

import {reset} from 'redux-form';

...

result = (values) => {
  const { history } = this.props;
  this.props.dispatch(addVisitors(values)).then(
    (success) => {
      toast.success(success);
      history.push('/visitors');
      this.props.dispatch(reset('myForm')) // Change to your form name
    },
    (error) => {
      toast.error(error);
    }
  );
};