梗概
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进一步优化性能
相关概念
father:: antd