form.useWatch示例

same::

Form字段监听

• React

梗概

Form.useWatch 是Antd提供的Hook，用于监听表单中特定字段的值变化，实现响应式的表单交互。与传统的表单监听方式相比，它更轻量且性能更好。

基本用法

监听单个字段

import React from 'react';
import { Form, Input, Typography } from 'antd';
 
const { Text } = Typography;
 
const WatchSingleField = () => {
  const [form] = Form.useForm();
  const username = Form.useWatch('username', form); // 只监听 username 字段
 
  return (
    <div style={{ maxWidth: 500 }}>
      <Form form={form}>
        <Form.Item name="username" label="用户名">
          <Input />
        </Form.Item>
      </Form>
      
      {/* 只显示 username 字段 */}
      <Text strong style={{ marginTop: 16, display: 'block' }}>
        当前用户名: {username || '未输入'}
      </Text>
    </div>
  );
};
 
export default WatchSingleField;

监听多个字段(建议不要使用， 有bug)

const WatchMultipleFields = () => {
  const [form] = Form.useForm();
  const values = Form.useWatch(['username', 'email'], form);
  
  return (
    <div>
      <Form form={form}>
        <Form.Item name="username" label="用户名">
          <Input />
        </Form.Item>
        <Form.Item name="email" label="邮箱">
          <Input />
        </Form.Item>
      </Form>
      
      <div>
        <p>用户名: {values?.username}</p>
        <p>邮箱: {values?.email}</p>
      </div>
    </div>
  );
};

监听所有字段

const WatchAllFields = () => {
  const [form] = Form.useForm();
  const values = Form.useWatch([], form); // 空数组表示监听所有字段
  
  return (
    <div>
      <Form form={form}>
        {/* 表单项 */}
      </Form>
      
      <pre>{JSON.stringify(values, null, 2)}</pre>
    </div>
  );
};

应用场景

实时表单验证

根据字段值变化进行实时验证提示

条件显示/隐藏

根据某个字段的值决定其他字段是否显示

计算衍生值

根据多个字段值计算出新的值进行显示

性能优化

• Form.useWatch 只会在监听的字段发生变化时才触发重新渲染
• 相比监听整个表单值，监听特定字段性能更好
• 可以配合React.memo进一步优化性能

相关概念

• 表单传值
• Vue的watch对比
• React监听机制

father:: antd

指向原始笔记的链接