antd4摒弃了antd3的
getFieldDecorator,initialValue
一、函数中设置数据回显,使用useForm
操作如下:https://blog.csdn.net/Welkin_qing/article/details/110004969
(1)使用useForm
使用form可以使用antd的setFieldsValue
const [form] = Form.useForm()
const requestProfileList = useCallback(async () => {
try {
const { result } = await fetchProfileListRequest()
form.setFieldsValue(result)
} catch (e) {
message.error(e)
}
}, [])
(2)在form表单中定义form
//表单提交
const handleOnFinish = useCallback(
(value) => {
//拿到数据
console.log(value)
},
[]
)
<Form layout="horizontal" onFinish={handleOnFinish} form={form}>
</Form>
二、不使用useForm
<Form
className={styles['form-container']}
onFinish={handleSubmit}
initialValues={{ log_id: 'lca.log' }} //设置数据回显
>
<div className={styles['form-container__keyIn']}>
//设置规则
<Form.Item name="log_id" rules={[{ required: true, message: '请选择日志' }]}>
<Select
placeholder="选择日志"
disabled={disable || switch_info.logSwitch}
defaultActiveFirstOption
>
{LOG_INFO.map(
(item, index): JSX.Element => {
return (
<Option value={item.value} key={index}>
{item.label}
</Option>
);
},
)}
</Select>
</Form.Item>
</div>
</form>