Question

有人可以建议我如何使用这种形式的onSubmit事件吗？

<Form onSubmit={this.handleSubmit}>

提琴-https://codepen.io/jaison-james/full/rojypw

Answer 1

需要注意的是，onFieldsChange应该直接应用于onValuesChange时，hoc和Form.create({onFieldsChange, onValuesChange})是onSubmit的选项：<Form onSubmit={...}> 。没有onSubmit option for hoc available。

您可以做的是-在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);

我们如何在Form.create中使用OnSubmit事件

1 个答案: