React当ProForm表单完成日期选择后onChange监听当选择完成后查询出ProTable对应数据用函数组件ts

可以通过以下步骤实现：

1. 在 ProForm 表单中添加日期选择器，并设置 onChange 监听器：

// import 相关组件和类型
import { ProFormDatePicker } from '@ant-design/pro-form';
import { Moment } from 'moment';

interface FormProps {
  onChange: (date: Moment) => void;
}

const MyForm: React.FC<FormProps> = ({ onChange }) => {
  return (
    <ProForm>
      <ProFormDatePicker
        name="date"
        label="选择日期"
        onChange={(date) => {
          onChange(date);
        }}
      />
    </ProForm>
  );
};

2. 在 ProTable 中使用函数组件，并监听日期的变化，查询对应的数据：

// import 相关组件和类型
import { ProTable, ProColumns } from '@ant-design/pro-table';
import { Moment } from 'moment';

interface TableProps {
  date: Moment | null;
}

const MyTable: React.FC<TableProps> = ({ date }) => {
  const fetchData = async () => {
    // 根据日期查询对应的数据并返回
    const data = await queryData(date);
    return data;
  };

  const columns: ProColumns<DataType>[] = [
    // 列定义
  ];

  return (
    <ProTable<DataType>
      columns={columns}
      request={fetchData}
    />
  );
};

3. 将表单组件和表格组件组合在一起：

const MyPage: React.FC = () => {
  const [date, setDate] = useState<Moment | null>(null);

  const handleFormChange = (date: Moment) => {
    setDate(date);
  };

  return (
    <>
      <MyForm onChange={handleFormChange} />
      <MyTable date={date} />
    </>
  );
};

这样，当用户选择日期后，会自动查询对应的数据并在表格中展示。需要注意的是，`queryData` 函数需要根据具体需求自行实现。