时间戳

首页 > 解决方案 > 我们如何在 Form.create 中使用 OnSubmit 事件

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

问题描述

谁能建议我如何以这种形式使用 onSubmit 事件？

<Form onSubmit={this.handleSubmit}>

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

标签： antd

解决方案

值得注意的是onFieldsChange，onValuesChange是选项hoc：Form.create({onFieldsChange, onValuesChange})，当onSubmit应该直接应用到<Form onSubmit={...}>。没有onSubmit可用的 hoc 选项。

您可以做的是 -onSubmit在中定义处理程序<Form>，并调用通过道具传递的父处理程序。这是一个仅在情况下调用父处理程序的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);

推荐阅读