在React.js中链接两个筛选器,可以通过以下步骤实现:
以下是一个示例代码:
import React, { useState } from 'react';
// 筛选器组件
const Filter = ({ options, selectedValue, onFilterChange }) => {
const handleFilterChange = (event) => {
const value = event.target.value;
onFilterChange(value);
};
return (
<select value={selectedValue} onChange={handleFilterChange}>
<option value="">All</option>
{options.map((option) => (
<option key={option} value={option}>{option}</option>
))}
</select>
);
};
// 父组件
const App = () => {
const [filter1, setFilter1] = useState('');
const [filter2, setFilter2] = useState('');
const data = [
{ name: 'Item 1', category: 'Category A', color: 'Red' },
{ name: 'Item 2', category: 'Category B', color: 'Blue' },
{ name: 'Item 3', category: 'Category A', color: 'Green' },
// ...
];
const filteredData = data.filter((item) => {
return (filter1 === '' || item.category === filter1) &&
(filter2 === '' || item.color === filter2);
});
return (
<div>
<h1>Filter Example</h1>
<Filter
options={['Category A', 'Category B']}
selectedValue={filter1}
onFilterChange={setFilter1}
/>
<Filter
options={['Red', 'Blue', 'Green']}
selectedValue={filter2}
onFilterChange={setFilter2}
/>
<ul>
{filteredData.map((item) => (
<li key={item.name}>{item.name}</li>
))}
</ul>
</div>
);
};
export default App;
在上面的示例中,我们创建了两个筛选器组件(Filter),一个用于选择类别(filter1),另一个用于选择颜色(filter2)。父组件(App)存储了筛选器的值,并根据这些值过滤数据。最后,根据过滤后的数据更新UI以显示结果。
这只是一个简单的示例,你可以根据实际需求进行修改和扩展。对于React.js的更多信息和学习资源,你可以参考腾讯云的React.js产品介绍页面:React.js产品介绍。
领取专属 10元无门槛券
手把手带您无忧上云