Antd4之form表单数据回显

一、函数中设置数据回显，使用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>