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

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。为了解决这个问题，我会尝试在你的承诺和匿名函数之外定义一个变量，并在你的承诺中引用新声明的变量而不是 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 提交表单后清除表单域

Clear the form field after submitting the form using ReduxForm in ReactJS

reactjs

redux-form