### React 中监听表单特定值变化的方法 在 React 中，监听表单中某个特定值的变化可以通过多种方式实现。以下是几种常见的方法及其适用场景： 1. **使用 `Form.useWatch`（适用于 Ant Design Form）** 如果你使用的是 Ant Design 的 `Form` 组件，可以通过 `Form.useWatch` 方法直接监听表单字段的实时变化[^1]。例如： ```javascript const jobid = Form.useWatch('jobid', form); useEffect(() => { if (jobid) { form.setFieldValue('pline', thisids.find(x => x.value === jobid)?.label); console.log('jobid change', jobid); } }, [jobid]); ``` 该方法简单高效，适合需要实时获取表单字段值并执行相关逻辑的场景。 2. **使用 `useEffect` 和 `form.getFieldValue`** 在某些情况下，可能需要通过 `useEffect` 配合 `form.getFieldValue` 来监听表单字段的变化[^2]。例如： ```javascript useEffect(() => { const currentValue = form.getFieldValue('xx'); console.log('监听到字段 xx 的变化:', currentValue); }, [form.getFieldValue('xx')]); ``` 注意：这种方式可能会遇到子组件无法正确监听的问题，具体原因可能是依赖项未正确更新或上下文问题。因此，在复杂场景下需谨慎使用。 3. **改写 `setFieldsValue` 方法以支持回调监听** 如果需要监听 `setFieldsValue` 的调用，可以改写 `FormInstance` 上的 `setFieldsValue` 方法[^3]。例如： ```javascript useEffect(() => { const originalSetFieldsValue = form.setFieldsValue; form.setFieldsValue = (values, callback) => { originalSetFieldsValue(values); if (callback) callback(values); console.log('setFieldsValue 被调用:', values); }; }, []); ``` 这种方式适合需要在调用 `setFieldsValue` 时触发额外逻辑的场景。 4. **自定义 Hook 实现监听** 对于更复杂的场景，可以封装一个自定义 Hook 来监听表单字段的变化。例如： ```javascript function useFormFieldWatcher(form, fieldName) { const [value, setValue] = useState(form.getFieldValue(fieldName)); useEffect(() => { const onValuesChange = (_, changedValues) => { if (changedValues[fieldName] !== undefined) { setValue(changedValues[fieldName]); } }; form.onValuesChange(onValuesChange); return () => form.offValuesChange(onValuesChange); }, [form, fieldName]); return value; } // 使用示例 const watchedValue = useFormFieldWatcher(form, 'jobid'); useEffect(() => { console.log('jobid 变化:', watchedValue); }, [watchedValue]); ``` 自定义 Hook 提供了更高的灵活性和可复用性，适合复杂项目中的表单监听需求。 --- ###