antd获取表单的所有数据

当我们使用antd的组件的form表单时，数据一般在form中的onFinish={onFinish}方法上可以拿到

const Demo = () => {
  const onFinish = (values: any) => {
    console.log("表单数据",values);
  };

我们还可以使用 const [form] = Form.useForm() 拿到表单的数据

具体步骤

1.引入ant，拿到Form，定义hooks

import form {Form} from 'antd'

const [form] = Form.useForm()

2.在form表单写入form

<Form
  name="nest-messages"
  onFinish={onFinish}
  form={form}                  //form
>
    <Button type="primary" htmlType="submit" onclick={btnValue}>
      Submit
    </Button>
</Form>

3.通过 form.getFieldValue 获取表单数据

  const btnValue = ()=>{
    console.log(form.getFieldsValue());
  }

打印出来就是我们表单所填写的数据啦