,可以通过以下步骤实现:
以下是一个示例代码:
import React, { Component } from 'react';
class FilteredList extends Component {
constructor(props) {
super(props);
this.state = {
options: ['Option 1', 'Option 2', 'Option 3'], // 所有选项
selectedOptions: [], // 选中的选项
};
}
handleOptionChange(option) {
const { selectedOptions } = this.state;
if (selectedOptions.includes(option)) {
// 如果已选中,则移除
this.setState({
selectedOptions: selectedOptions.filter((item) => item !== option),
});
} else {
// 如果未选中,则添加
this.setState({
selectedOptions: [...selectedOptions, option],
});
}
}
render() {
const { options, selectedOptions } = this.state;
// 根据选中选项过滤列表
const filteredList = this.props.list.filter((item) =>
selectedOptions.includes(item.category)
);
return (
<div>
<div>
{options.map((option) => (
<label key={option}>
<input
type="checkbox"
value={option}
checked={selectedOptions.includes(option)}
onChange={() => this.handleOptionChange(option)}
/>
{option}
</label>
))}
</div>
<ul>
{filteredList.map((item) => (
<li key={item.id}>{item.name}</li>
))}
</ul>
</div>
);
}
}
export default FilteredList;
在上述示例代码中,我们创建了一个名为FilteredList的React组件。它接受一个名为list的props,表示要显示的列表数据。组件内部维护了options和selectedOptions两个状态,分别表示所有选项和选中的选项。
在render方法中,我们使用map函数遍历options数组,为每个选项创建一个CheckBox。每个CheckBox的onChange事件调用handleOptionChange方法,根据选中状态更新selectedOptions数组。
根据selectedOptions数组,我们使用filter函数对列表进行过滤,只显示符合条件的项。最后,将过滤后的列表渲染到页面上。
这是一个简单的示例,你可以根据实际需求进行扩展和优化。
腾讯云相关产品和产品介绍链接地址:
请注意,以上链接仅供参考,具体产品选择应根据实际需求和情况进行。
企业创新在线学堂
云+社区技术沙龙[第8期]
Elastic 中国开发者大会
云+社区技术沙龙[第27期]
云+社区技术沙龙[第10期]
Elastic 中国开发者大会
云原生正发声
Techo Day 第三期
云+社区技术沙龙[第14期]
领取专属 10元无门槛券
手把手带您无忧上云