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>
|