如何在React中实现支持多筛选条件的搜索栏并展示已选筛选项

首先放弃绝对定位堆叠组件的方案，改用标签流容器+状态机控制交互的方案，原生适配响应式布局，具体实现思路如下：

• 核心容器结构：用flex布局的<div>模拟搜索框外壳，设置flex-wrap: wrap属性。容器内部依次渲染已添加的筛选条件Tag组件，末尾放置一个宽度自适应的原生受控<input>。点击整个容器时自动聚焦到内部input，视觉上和普通搜索框完全一致。
• 交互状态管理：用状态变量控制当前输入的三个阶段，完全避免浮动定位的适配问题：
  1. 选筛选键：input聚焦后默认展示筛选键下拉列表，选择后暂存当前筛选的key值，切换到运算符选择阶段
  2. 选逻辑运算符：根据选中的筛选键类型（字符串/数字/时间/枚举），展示对应支持的运算符下拉（如包含/等于/大于/早于等），选择后暂存operator值，切换到筛选值选择阶段
  3. 选筛选值：根据筛选键类型展示对应的值选择组件（枚举下拉/数字输入框/日期选择器等），确认后将key/operator/value拼接为完整筛选对象，存入筛选数组，自动生成Tag插入容器，状态重置回筛选键选择阶段，支持继续添加下一个条件
• 筛选条件增删逻辑：用数组维护所有已生效的筛选条件，每个元素绑定唯一id。渲染Tag时在右侧渲染删除按钮，点击后过滤掉对应id的数组元素即可完成单条删除，也可额外添加一键清空、退格键删除最后一条等交互优化。
• 响应式适配：因为所有Tag和input都在弹性流布局内，容器宽度变化时Tag会自动换行，不会出现定位错位问题，天然适配移动端、桌面端不同尺寸。

如果要降低开发成本，也可以基于成熟组件库的现有能力扩展：比如Ant Design的Select组件开启customDropdown自定义下拉面板，配合tagRender自定义标签渲染，可快速实现上述交互逻辑。

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