Antd v5如何通过useWatch钩子一次性获取多个表单字段值？

在Antd v5中，直接给useWatch传字段数组会返回对应值的数组，要得到你想要的键值对对象，按以下方式实现即可：

完整实现代码 #

import { Form, Input } from 'antd';

const Test = () => {
  // 获取表单实例
  const [form] = Form.useForm();
  
  // 监听指定字段，返回值数组
  const [firstName, lastName] = Form.useWatch(['first_name', 'last_name'], form);
  
  // 组装成目标对象
  const firstAndLastNames = {
    first_name: firstName,
    last_name: lastName
  };

  return (
    <Form form={form}>
      <Form.Item name="first_name">
        <Input />
      </Form.Item>

      <Form.Item name="last_name">
        <Input />
      </Form.Item>
    </Form>
  );
};

export default Test;

核心要点 #

• 传入form实例：监听多字段时，必须把Form.useForm()创建的实例作为第二个参数传给useWatch，否则可能出现监听失效的问题。
• 数组转对象：useWatch返回的数组顺序和你传入的字段数组完全一致，通过解构赋值或手动映射就能轻松组装成对象。
• 修正拼写错误：你的示例里fist_name是笔误，正确应为first_name，记得修改避免表单字段匹配失败。

内容的提问来源于stack exchange，提问作者Dimitriy