antd 动态添加筛选条件 两个select联动

antd 是一套 React UI 组件库，提供了一系列实用的组件，同时也提供了筛选条件的组件，其中，选择器组件 Select 就是我们常用的筛选条件组件之一。

如果要实现两个 Select 组件之间的联动，我们需要通过事件处理函数来实现。假设我们要实现一个城市选择器和区域选择器的联动，即根据选中的城市动态加载对应的区域列表。我们可以通过以下步骤来完成：

1. 定义两个 Select 组件以及相关的 state

我们可以在父组件的 state 中定义 city 和 district 两个变量，用于存储当前选中的城市和区域。然后在 render 方法中渲染两个 Select 组件，并将 onChange 事件绑定到对应的事件处理函数。

2. 加载城市列表数据

在组件挂载完成之后，我们需要通过 API 请求服务端获取城市列表数据，并存储到 state 中。

3. 实现城市选择器的 onChange 事件处理函数

当用户选择一个城市时，我们需要根据选中的城市动态加载对应的区域列表。首先，我们需要将当前选中的城市存储到 state 中。然后，根据选中的城市，从服务端获取对应的区域列表数据，并存储到 state 中。最后，清空当前选中的区域，并将区域选择器的下拉框关闭。

4. 实现区域选择器的 onChange 事件处理函数

当用户选择一个区域时，我们需要将当前选中的区域存储到 state 中。

5. 完成渲染

最后，我们需要根据 state 中存储的数据渲染 Select 组件，将城市列表渲染到城市选择器中，将区域列表渲染到区域选择器中。

通过以上步骤，我们就可以实现两个 Select 组件的联动。因为 antd 提供了非常友好的文档和示例代码，所以实现过程并不难。相信大家只要认真学习，都可以轻松掌握。