javascript - React 中的过滤器列表
问题描述
我这里有问题。我有一个反应 api,我想制作一个选择框来按特定属性过滤数据。
constructor() {
super();
this.state = {
results: []
};
}
我收到一份带有名称和评级的项目列表。我想用选择过滤。如果我只想查看评分为 5 或更高的项目,请选择 5。
return (
<div className="container clearfix">
{/* value={props.search} */}
<select>
<option value="" />
<option value="10">10</option>
<option value="9">9</option>
<option value="8">8</option>
</select>
<div>
{props.results
.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>
);
德克萨斯!
解决方案
您需要将侦听器附加到Select
例如
<Select onChange={(event) => this.setState({filterValue: event.target.value})}
然后你可以过滤结果
props.results.filter((item) => item.rating >= this.state.filterValue)
.map(...)
推荐阅读
- visual-studio - 为 UWP 应用购买和集成外部证书
- kubernetes - 如何使用位于同一个 k8s 集群内的 kubectl exec 从另一个 pod 中的一个 pod 执行命令
- python - 不能在 datetime.time 对象上按 pd.Grouper 分组
- php - 如何将当前日期设置为输入的默认值?
- javascript - 条件渲染不能防止渲染
- vue.js - Vue.js 预取 CSS 文件
- python - 如何在 python 中安装 textfsm?
- ionic3 - 如何在 Ionic 3 中发送 http put 请求?
- android - BLE:三星手机上的 onConnectionStateChange 状态 8
- javascript - 如何使用异步代码以正确的顺序记录响应