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);
          }
        );
      };

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);
    }
  );
};

Answer 2

我认为您收到此错误是因为您在匿名函数中，并且这不再引用您的表单。作为参考，请看：https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/this。要解决此问题，我将尝试在您的promise和匿名函数之外定义一个变量，并在您的promise中引用该新声明的变量而不是this.props.destroy();。例如，

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

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

2 个答案: