父子组件通信并操作form表单

Step1 父组件向子组件传递函数式参数

操作

# 父组件：
<Modal title="修改分类" getContainer={false} visible={isModalVisible===2} onOk={this.showUpdateForm} onCancel={this.handleCancel}>
         <UpdateForm {...category} setForm={(form)=>{this.form = form}}/>
</Modal>
【说明：/*父组件向子组件传递一个函数，子组件通过调用该函数，向父组件传递它（子组件）的form表单*/】

# 子组件：
const UpdateForm = (props) => {
   .......
    const [form] = Form.useForm();
    props.setForm(form)
    return (
        <Form>                      ------------- /*<Form  form={form}>*/
            <Form.Item>
                <Input defaultValue={categoryName}/>
            </Form.Item>
        </Form>
    )
}
【说明：1.form实例通过Form.useForm()进行初始化
             2.props参数中有父组件传递过来的setForm()函数，form实例通过参数的形式传递给父组件
  】

Step2 父组件操作子组件的form表单

# 父组件：
handleCancel = () =>{
        this.setState({
            isModalVisible:0
        })
        /*在取消按钮的函数里进行测试清空功能*/
        this.form.resetFields() 
    }
【说明：在取消按钮函数handleCancel()中，清空子组件form表单中input输入框中的值】
# 【备注：输出父组件中获取到的form，得到结果如下】