React中如何将筛选按钮组转换为下拉菜单？

没问题，我帮你搞定把年份筛选按钮转成下拉菜单的事儿！核心就是把原来按钮依赖的onClick逻辑迁移到下拉菜单的onChange事件上，原有筛选逻辑基本不用动，咱们一步步来：

1. 修改年份筛选渲染函数 #

把原来生成FilterButton的逻辑改成生成下拉选项（<option>），外面套一个<select>标签来承载下拉菜单，同时处理onChange事件：

renderYearFilters () {
  const { years } = this.compileFilters();
  const { activeFilters, activeRecords } = this.state;
  const records = activeFilters.size ? activeRecords : Object.keys(this.props.records).map(key => Object.assign(this.props.records[key], {id: key}));
  
  // 找出当前选中的年份（用于下拉菜单默认选中）
  const selectedYear = Array.from(activeFilters)
    .find(filter => filter.startsWith(`${FILTER_TYPE_YEAR}=`))
    ?.split('=')[1] || '';

  // 生成下拉选项列表
  const yearOptions = years.map(year => {
    const count = records.filter(record => {
      return Math.floor(new Date(record['launch-date']).getFullYear() / 10) * 10 === year
    }).length;
    // 只显示有数据的年份（和原来的hide类逻辑一致）
    if (count === 0) return null;
    
    return (
      <option key={year} value={year}>
        {year} ({count})
      </option>
    );
  }).filter(option => option !== null); // 过滤掉无数据的选项

  // 返回下拉菜单整体
  return (
    <select 
      value={selectedYear}
      onChange={(e) => {
        // 调用原来的toggleFilter逻辑，注意这里要执行它返回的函数
        this.toggleFilter(FILTER_TYPE_YEAR, e.target.value)();
      }}
      className="year-filter-dropdown"
    >
      {/* 可选：加一个"全部年份"的默认选项 */}
      <option value="">全部年份</option>
      {yearOptions}
    </select>
  );
}

2. 适配原有筛选逻辑 #

你的toggleFilter函数应该是返回一个闭包函数来处理筛选的添加/移除，所以在onChange里需要调用它返回的函数（也就是后面加()）。如果你的toggleFilter是直接处理逻辑而不是返回函数，那改成这样调用就行：

onChange={(e) => this.toggleFilter(FILTER_TYPE_YEAR, e.target.value)}

3. 样式调整（可选） #

原来的active类是给按钮用的，现在下拉菜单的选中状态由value属性控制，你可以给<select>加个自定义类（比如上面的year-filter-dropdown），然后写CSS样式来美化下拉菜单，比如选中时的样式、hover效果等。

4. 渲染部分保持不变 #

原来的渲染代码不用改，还是在FilterTypeWrapper里调用this.renderYearFilters()就行：

<form>
  <FilterTypeHeader>Operator</FilterTypeHeader>
  <FilterTypeWrapper>
    {this.renderOperatorFilters()}
  </FilterTypeWrapper>
  <FilterTypeHeader>Mission Type</FilterTypeHeader>
  <FilterTypeWrapper>
    {this.renderMissionTypeFilters()}
  </FilterTypeWrapper>
  <FilterTypeHeader>Year</FilterTypeHeader>
  <FilterTypeWrapper>
    {this.renderYearFilters()}
  </FilterTypeWrapper>
</form>

这样改完之后，下拉菜单就能完美替代原来的按钮组，同时保留所有筛选逻辑啦！

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