React使用 Ant Design 的From 组件时容易踩的坑

1、使用Ant Design的From表单容易遇到的问题：

1.2使用MoDal + From表单如何回显？

定义 formRef = React.createRef();
在From表单引用 ref={this.formRef} ,定义initialValues 初始化值

1.3 Modal组件关闭如何清空Form表单的值？

和 Form 一起配合使用时，设置 destroyOnClose 也不会在 Modal 关闭时销毁表单字段数据，需要在Form表单处设置 preserve={false}
1.2和1.3的代码如下：

   formRef = React.createRef();
<Modal
                    width={550}
                    title={title}
                    visible={visible}
                    maskClosable={false}
                    onCancel={exitModal}
                    destroyOnClose={true}
                    footer={[
                        <Button key="confirm" type="primary" onClick={() => {
                            $('#submit_btn').click();
                        }}>确定</Button>,
                        <Button key="cancel" type="link" onClick={exitModal}>取消</Button>]}
                >

                    <Form onFinish={(values) => createOrUpdateApprovalRule(values)}
                          ref={this.formRef}
                          initialValues={isAdd=="edit"?approvalRuleInfo:{}}
                          preserve={false}
                    >
                        <Form.Item label="项目" name="projectId"
                                   rules={[
                                       {
                                           required: true,
                                           message: 'Required item cannot be empty',
                                       },
                                   ]}
                                   style={{marginLeft: '158px'}}
                        >
                            <Select style={{width: '260px'}}
                                    allowClear={true}
                                    onChange={onProjectChange}
                                    value={projectValue}
                                    disabled={isAdd=="edit"}
                                    onClear={(e)=>onClearChangeByProject(e)}
                            >
                                {
                                    (projectOption || []).map((item, index) => {
                                        return <Option key={index} value={item.value}>{item.label}</Option>
                                    })
                                }
                            </Select>
                        </Form.Item>
                        <Form.Item label="问题类型 " name="issueTypeId"
                                   rules={[
                                       {
                                           required: true,
                                           message: 'Required item cannot be empty',
                                       },
                                   ]}
                                   style={{marginLeft: '130px'}}
                        >
                            <Select style={{width: '260px'}}
                                    allowClear={true}
                                    onChange={onIssueTypeChange}
                                    value={issueTypeValue}
                                    onClear={(e)=>onClearChangeByIssueType(e)}
                            >
                                {
                                    (issueTypeOption || []).map((item, index) => {
                                        return <Option key={index} value={item.value}>{item.label}</Option>
                                    })
                                }
                            </Select>
                        </Form.Item>
                        <Button style={{display: "none"}} htmlType="submit" id="submit_btn"/>
                    </Form>

1.4 当Form表单设置 initialValues时，如何清空Form表单指定的值？

定义onclear事件，"issueTypeId"是指的From表单中所对应的name

const onClearChangeByProject = (e)=>{
                this.formRef.current.setFieldsValue({
                    issueTypeId: undefined,
                    statusId:undefined,
                    approveActionId:undefined,
                    rejectActionId:undefined
                })

        }

<Form.Item label="项目" name="projectId"
                                   rules={[
                                       {
                                           required: true,
                                           message: 'Required item cannot be empty',
                                       },
                                   ]}
                                   style={{marginLeft: '158px'}}
                        >
                            <Select style={{width: '260px'}}
                                    allowClear={true}
                                    onChange={onProjectChange}
                                    value={projectValue}
                                    disabled={isAdd=="edit"}
                                    onClear={(e)=>onClearChangeByProject(e)}
                            >
                                {
                                    (projectOption || []).map((item, index) => {
                                        return <Option key={index} value={item.value}>{item.label}</Option>
                                    })
                                }
                            </Select>
                        </Form.Item>