如何将这些过滤器按钮更改为下拉菜单？

Question

我目前有一组用于过滤项目的按钮。我想将按钮更改为下拉菜单。我遇到了问题，因为我的逻辑适用于onClick，并且下拉菜单不允许使用onClick处理程序。

这是js逻辑的代码

在此处呈现它

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>

  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}));


      return years.map(year => {
          const active = activeFilters.has(`${FILTER_TYPE_YEAR}=${year}`) ? true : false;
          const yearName = year; // .toSnakeCase(); // .toLowerCase().replace(/ /g, '-').replace(/[\/\\]/g, 'and')
          // TODO: This is really expensive, can be majorly improved
          const count = records.filter(record => {
            // console.log('YEAR', Math.floor(new Date(record['launch-date']).getFullYear() / 10) * 10, year);
            return Math.floor(new Date(record['launch-date']).getFullYear() / 10) * 10 == year
          }).length;
          const classNames = [
              active ? 'active' : null,
              count > 0 ? null : 'hide',
          ];

          return (
              <FilterButton
                  onClick={this.toggleFilter(FILTER_TYPE_YEAR, year).bind(this)}
                  className={classNames.join(' ')}
                  key={year}
              >
                  {year} ({count})
              </FilterButton>
               

          );
      });
  }


<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>

<form>
                                    <FilterTypeHeader>Operator</FilterTypeHeader>
                                    <FilterTypeWrapper>
                                        {this.renderOperatorFilters()} 
                                    </FilterTypeWrapper>
                                    <FilterTypeHeader>Mission Type</FilterTypeHeader>
                                    <FilterTypeWrapper>
                                        {this.renderMissionTypeFilters()} 
                                    </FilterTypeWrapper>
                                    <FilterTypeHeader>Year</FilterTypeHeader>
                                    <FilterTypeWrapper>
                                        {this.renderYearFilters()}
                                    </FilterTypeWrapper>
                                    
                                </form>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>