🧐[问题] ProTable的表单，搜索中怎么实现选择类表单值改变就立即搜索呢

[zmm2tysu]

🧐 问题描述

ProTable的表单，搜索中怎么实现选择类表单值改变就立即搜索呢

[chenshuai2144]

💡 解决方案

ProTable的表单搜索中，可以通过表单的onValuesChange属性来实现表单值改变就立即搜索的功能。

首先，在ProTable组件中，需要设置search属性为false，然后在表单中添加onValuesChange函数，当表单的值发生改变时，就立即进行搜索。

以一个示例代码为例：

import ProTable from '@ant-design/pro-table';
import { Select } from 'antd';

// 枚举类型数据
const enumData = [
  { label: '选项1', value: '1' },
  { label: '选项2', value: '2' },
  { label: '选项3', value: '3' },
];

// 表单组件
const FormSearch = () => {
  const { Option } = Select;

  // 表单值发生改变时进行搜索
  const handleFormChange = (values: any) => {
    console.log('表单值发生改变', values);
    // 进行搜索
    searchAction(values);
  };

  return (
    <ProTable
      columns={[]}
      search={false}
      onSubmit={() => {}}
      dateFormatter="string"
      toolBarRender={() => []}
      onReset={() => history.push('')}
      form={{
        onValuesChange: handleFormChange,
      }}
    >
      <ProForm.Group>
        <ProFormSelect name="keyword" label="关键字" options={enumData} />
      </ProForm.Group>
    </ProTable>
  );
};

在这个示例代码中，我们将ProTable组件的search属性设置为false，然后在表单组件中添加onValuesChange函数，当表单的值发生改变时，就会调用这个函数，并进行搜索。

同时，我们还需要将ProTable组件的onSubmit属性设置为空函数，以避免表单的默认提交事件。

最后，在handleChange函数中，我们需要手动调用searchAction函数进行搜索，searchAction是一个异步操作，需要具体实现。

此外，还需要注意，ProTable组件中的表单组件必须使用ProForm组件，否则无法使用onValuesChange函数。

This sentence can be automatically replied to using ChatGPT. 此回复基于 ChatGPT 自动生成。

[chenshuai2144]

TAutomatically replying with ChatGPT can be attempted, but it cannot be guaranteed to be completely accurate and may not fully address all issues. Please feel free to reply if you have any further questions or concerns. 此回复基于 ChatGPT 自动生成，可以尝试下方案，官方员会在一定时间后继续继续处理。

希望这个解决方案可以帮助你实现表单值改变立即搜索的功能。另外，如果你在实现过程中遇到了其他问题，可以继续在该issue进行提问，我会尽力帮助你解决问题。