React JS中清除Input与日期组件内容：状态更新UI未同步问题解决

问题根源 #

你遇到的问题是混用了自定义状态管理与Ant Design Form的内置字段管理机制：

• 你给Input手动绑定了value={jobNoValue}和onChange={handleJobNoChange}，同时又用Form.Item包裹并设置了name属性
• AntD Form的Form.Item会自动接管表单控件的状态，此时你的自定义jobNoValue状态和Form内部维护的字段状态出现了不同步——清空自定义状态后，Form内部的字段值并未更新，导致UI没有变化

解决方案：用Form实例统一管理（推荐） #

完全可以通过表单ref来实现清除功能，这也是AntD Form设计的标准用法，能彻底避免状态不同步问题：

步骤1：创建Form的ref并绑定到Form组件

import { useRef } from 'react';
import { Form } from 'antd';

const NotificationCenter = () => {
  // 创建Form实例的ref
  const formRef = useRef(null);

  // ... 其他状态和方法

  return (
    // ... 其他代码
    <Form ref={formRef}> {/* 绑定ref */}
      {/* 原表单内容 */}
    </Form>
    // ... 其他代码
  );
};

步骤2：修改清除按钮的点击逻辑

直接调用Form实例的resetFields()方法，一键清空所有表单字段：

const handleClear = () => {
  // 重置所有Form.Item定义的字段（包括DateRange和jobNoValue）
  formRef.current?.resetFields();
  // 若需要同时清空通知列表，可在此处添加：setNotificationItemList([])
};

步骤3：移除Input的手动状态绑定

既然用Form统一管理，就不需要再手动绑定value和onChange，Form会自动处理：

<Form.Item name="jobNoValue">
  <Input placeholder="Enter Job Number" />
  {/* 移除原有的value和onChange属性 */}
</Form.Item>

步骤4：修改搜索逻辑（从Form获取值）

如果需要在搜索时获取表单值，通过Form实例的validateFields()获取：

const getNotificationList = async () => {
  try {
    // 验证并获取所有表单字段值
    const formValues = await formRef.current.validateFields();
    // formValues包含DateRange和jobNoValue，直接用于请求数据
    console.log('表单参数:', formValues);
    // 后续请求通知列表的逻辑...
  } catch (error) {
    console.error('表单验证失败:', error);
  }
};

备选方案：同步自定义状态与Form字段（不推荐） #

如果一定要保留自定义状态管理，需要在清除时同时更新Form内部的字段值：

const handleClear = () => {
  // 清空自定义状态
  setJobNoValue('');
  setDateRange(null);
  // 同步更新Form字段
  formRef.current?.setFieldValue('jobNoValue', '');
  formRef.current?.setFieldValue('DateRange', null);
};

这种方式需要维护两份状态，容易出现不一致，因此更推荐第一种方案。

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