Redux Form：验证成功后和提交前如何添加功能

Question

我有一个经过验证的 redux 表单。当验证无误返回时，默认会在handleSubmit()中提交给控制器。

class SomeComponent extends Component {
  constructor(props) {
    super(props)
  }

  render() {
    const { handleSubmit, fields: { field }, submitting, values } = this.props;
    return (
    <form onSubmit={handleSubmit(this.props.someActionForm)}>
      <TextField {...field.input}
        type="text"
        label="FIELD"
        floatingLabelText="FIELD"
        errorText={field.touched? field.error: null}
      />

      <div className="col-xs-12">
        <FlatButton
          label="ACTIVATE"
          fullWidth={true}
          style={styles.fullButton}
          backgroundColor="#4FCDCC"
          hoverColor="#59e5e3"
          type="submit"
          disabled={submitting}
        />
      </div>
    </form>
   );
  }
}

function validate(values) {
  const errors = {};

  if(!values.field) {
    errors.field= "Field must not be empty !!!";
  }

  return errors;
}

SomeComponent = reduxForm({
  form: "SomeComponent",
  fields: ['field'],
  validate
}, mapStateToProps, mapDispatchToProps )(SomeComponent);

如何添加一个函数，例如在验证成功但表单提交到操作之前触发的加载元素（handleSubmit()）？

提前谢谢你

Answer 1

你可以像这样添加一个类方法：

class SomeComponent extends Component {
  submit(formProps) {
    // your logic
    this.props.someActionForm(formProps);
  };

  render() {
    const {handleSubmit, fields: {field}, submitting, values} = this.props;
    return (
      <form onSubmit={handleSubmit(this.submit)}>
        <TextField {...field.input}
                   type="text"
                   label="FIELD"
                   floatingLabelText="FIELD"
                   errorText={field.touched ? field.error : null}
        />

        <div className="col-xs-12">
          <FlatButton
            label="ACTIVATE"
            fullWidth={true}
            style={styles.fullButton}
            backgroundColor="#4FCDCC"
            hoverColor="#59e5e3"
            type="submit"
            disabled={submitting}
          />
        </div>
      </form>
    );
  }
}

请注意，您在 render 方法中忘记了 return