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>