form in modal antd 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}/>