is learning to use ant design"s modal and forms, and has encountered a problem.
what you want to achieve is that there are multiple buttons on the parent page that need to pop up their own Modal, and each Modal has its own Form, with its own validation content.
refer to the official example and write a code similar to the following
add NewOneA and NewOneB classes to the parent page:
saveAFormRef= (formRef) => {
this.formRef = formRef;
}
saveBFormRef= (formRef) => {
this.formRef = formRef;
}
render() {
return(
<NewOneA
wrappedComponentRef={this.saveAFormRef}
visible={visibleA}
onCancel={this.handleCancelA}
onOK={this.handleOKA}
/>
<NewOneB
wrappedComponentRef={this.saveBFormRef}
visible={visibleB}
onCancel={this.handleCancelB}
onOK={this.handleOKB}
/>
)
} where NewOneA and NewOneB are forms in Modal
pseudo code:
<Modal
visible={visible}
title={title}
onOk={onOK}
onCancel={onCancel}
>
<Form>
<FormItem>
{getFieldDecorator("author", {
rules: [{ ... }],
})(
<Input />
)}
</FormItem>
</Form>
</Modal>
because the formRef of NewOneA and NewOneB is stored in the same this.formRef in the parent page, the validateFields method cannot be used for verification correctly.
I tried to save formRef in two state, for example:
this.setState({ AformRef: formRef });but it doesn"t seem feasible to get a value from this.state.AformRef in other methods.
do you have any ideas to solve this problem?