hooks中ant design initialValues shouldUpdate Drawer 搭配使用
注意,如果form中使用了preserve,输入框有初始值,点击保存时输入框的值会变成空
代码块
<Drawer
width={720}
visible={props.visible}
onClose={() => {
props.onClose()
}}
bodyStyle={{ paddingBottom: 80 }}
title={ '编辑' }
destroyOnClose
footer={
<div className={styles.drawerFoot}>
<Button
onClick={() => {
props.onClose(), form.resetFields()
}}
className={styles.drawBtn}
>
{'取消'}
</Button>
<Button onClick={() => {
form.validateFields().then((values) => {
// console.log('表单值', values)
props.onSubmit(values);
});
}} type="primary">
{'保存'}
</Button>
</div>
}>
<Form
name="validate_other"
form={form}
{...formItemLayout}
initialValues={isUpdate ? selectedInfo : { ['openType']: 'default' }}
>
<Form.Item
label={'打开方式'}
name="openMode"
rules={[{ required: true, message: '请输入打开方式' }]}
>
<Select placeholder="请选择一个打开方式" allowClear>
<Option value={'01'}>链接打开</Option>
<Option value={'02'}>客户端</Option>
<Option value={'03'}>非结构化</Option>
<Option value={'04'}>FTL模板报告</Option>
</Select>
</Form.Item>
<Form.Item
noStyle
shouldUpdate={(prevValues, currentValues) => prevValues.openMode !== currentValues.openMode}
>
{({ getFieldValue }) => {
return getFieldValue('openMode') === '01' ? (
<Form.Item
label={'打开途径'}
name="openType"
rules={[{ required: true, message: '请输入打开途径' }]}
>
<Radio.Group>
<Radio value={'iframe'}>Iframe</Radio>
<Radio value={'ie'}>IE</Radio>
<Radio value={'default'}>默认</Radio>
</Radio.Group>
</Form.Item>
) : null;
}}
</Form.Item>
</Form>
</Drawer>