React列表筛选问题：如何用下拉框按评分过滤数据

没问题，我帮你把这个按评分筛选的功能搞定，咱们一步步调整代码：

1. 新增筛选状态 #

首先在组件的state里添加一个selectedRating字段，用来记录用户选择的评分阈值，初始值为空字符串（对应默认显示全部内容）：

constructor() {
  super();
  this.state = {
    results: [],
    selectedRating: '' // 新增筛选状态
  };
}

2. 添加下拉框的事件处理函数 #

给组件添加一个处理下拉框选择变化的方法，用来更新selectedRating的状态：

handleRatingChange = (e) => {
  // 将选中的评分值存入状态
  this.setState({ selectedRating: e.target.value });
}

如果你的组件是类组件且没用箭头函数，记得在constructor里绑定this：this.handleRatingChange = this.handleRatingChange.bind(this);

3. 改造下拉框为受控组件 #

把原来的<select>改成受控组件，绑定状态和事件，同时给空值选项加上明确的文本提示：

<select 
  value={this.state.selectedRating} 
  onChange={this.handleRatingChange}
>
  <option value="">全部</option>
  <option value="10">≥10</option>
  <option value="9">≥9</option>
  <option value="8">≥8</option>
</select>

4. 实现数据筛选逻辑 #

在渲染列表前，先根据selectedRating对数据进行筛选。注意要把字符串类型的评分值转成数字再比较，避免类型匹配错误：

<div>
  {
    // 先筛选数据再渲染
    props.results
      .filter(item => {
        // 如果没选评分，直接返回所有条目
        if (!this.state.selectedRating) return true;
        // 转成数字后比较，保留评分≥选中值的条目
        return Number(item.rating) >= Number(this.state.selectedRating);
      })
      .map(item=> (
        <div key={item.id} className="item-holder">
          <img src={`${imagePath}${item.image}`} />
          <span className="votes">{item.rating}</span>
          <p>{item.title}</p>
        </div>
      ))
  }
</div>

完整代码示例 #

把上面的部分整合起来，完整的组件代码大概是这样：

class YourComponent extends React.Component {
  constructor() {
    super();
    this.state = {
      results: [],
      selectedRating: ''
    };
    this.handleRatingChange = this.handleRatingChange.bind(this);
  }

  handleRatingChange(e) {
    this.setState({ selectedRating: e.target.value });
  }

  render() {
    const { imagePath, results } = this.props;
    return (
      <div className="container clearfix">
        <select 
          value={this.state.selectedRating} 
          onChange={this.handleRatingChange}
        >
          <option value="">全部</option>
          <option value="10">≥10</option>
          <option value="9">≥9</option>
          <option value="8">≥8</option>
        </select>
        <div>
          {
            results
              .filter(item => {
                if (!this.state.selectedRating) return true;
                return Number(item.rating) >= Number(this.state.selectedRating);
              })
              .map(item=> (
                <div key={item.id} className="item-holder">
                  <img src={`${imagePath}${item.image}`} />
                  <span className="votes">{item.rating}</span>
                  <p>{item.title}</p>
                </div>
              ))
          }
        </div>
      </div>
    );
  }
}

这样用户选择对应的评分后，列表就会自动过滤出评分≥选中值的条目啦～如果你的results是存在组件自身state里的，把this.props.results换成this.state.results就可以了。

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