antd modal form in class component react code example

Example: antd modal form in class component react

class CreatePlan extends Component {  constructor() {    super();  }   onOk = () => {    this.props.form.validateFields((err, values) => {      If (err) return;//Check if the data filled in the Form form meets the requirements of rules             this.props.onOk(values);//Invoke the onOk method given by the parent component and pass in the parameters of the Form.    })  };  onCancel = () => {         this.props.form.resetFields();//Reset the contents of the Form         this.props.onCancel()//calls the method given by the parent component  };   render() {    const {getFieldDecorator} = this.props.form;    return (      <Modal        onOk={this.onOk}        onCancel={this.onCancel}        visible={this.props.visible}                 Title='Add automatic upgrade'      >        <Form>                     <FormItem label="Upgrade plan name">            {getFieldDecorator('planName', {                             Rules: [{required: true, message: 'Please fill in the upgrade plan name'}],            })(              <Input/>            )}          </FormItem>                     <FormItem label="Automatic upgrade time">            {getFieldDecorator('upgradeTime', {              initialValue: moment(),                             Rules: [{required: true, message: 'Please select automatic upgrade time'}],            })(              <DatePicker                style={{width: 300}}                showTime                format="YYYY-MM-DD HH:mm:ss"                                 Placeholder="Select automatic upgrade time"              />            )}          </FormItem>        </Form>      </Modal>    )  }}export const CreatePlanFormModal = Form.create()(CreatePlan);  //The code in the following parent component <CreatePlanModal    visible={this.state.createPlanModalVisible}    onOk={(values) => this.judgeCreatePlan(values)}    onCancel={this.handleCancel}/>