Как мы используем событие OnSubmit с Form.create

Question

Может ли кто-нибудь подсказать, как мы можем использовать событие onSubmit в этой форме?

<Form onSubmit={this.handleSubmit}>

fiddle - https://codepen.io/jaison-james/full/rojypw

Answer 1

Стоит отметить, что onFieldsChange, onValuesChange - это опции для hoc: Form.create({onFieldsChange, onValuesChange}), когда onSubmit следует применять непосредственно к <Form onSubmit={...}>.Нет опции onSubmit для hoc доступны .

Что вы можете сделать - определить обработчик onSubmit в <Form> и вызвать родительский обработчик, переданный через props.Вот пример вызова родительского обработчика только в случае success, однако вы можете легко изменить его для вызова в любом случае:

const CustomizedForm = Form.create({
  onFieldsChange(props, changedFields) {
    // ... and other stuff
  },
})((props) => {

  const { getFieldDecorator, validateFields } = props.form;

  // this will be called on every submit
  const onSubmit = (e) => {
    e.preventDefault();

    validateFields((err, values) => {
        console.log('Received values of form: ', values);
        if (!err) {
            props.onSubmit(values); // call the parent submit
        }
    });
}

  return (
    <Form layout="inline" onSubmit={onSubmit}>
      // ... form content
    </Form>
  );
});

class Demo extends React.Component {

  // ... other stuff

  // define handler
  handleFormSubmitSuccess = (values) => {
    console.log('values are ok', values)
  }


  render() {
    const fields = this.state.fields;
    return (
      <div>
        <CustomizedForm
           {...fields}
           onChange={this.handleFormChange}
           onSubmit={this.handleFormSubmitSuccess} />
      </div>
    );
  }
}

ReactDOM.render(<Demo />, mountNode);