在ReactJS中制作一个可重用的下拉过滤器,可以在同一个组件中使用两次,可以按照以下步骤进行:
下面是一个示例代码:
import React, { Component } from 'react';
class DropdownFilter extends Component {
constructor(props) {
super(props);
this.state = {
options: props.options,
selectedValue: ''
};
}
handleChange = (event) => {
this.setState({ selectedValue: event.target.value });
}
render() {
const { options, selectedValue } = this.state;
const filteredData = this.props.data.filter(item => item.category === selectedValue);
return (
<div>
<select value={selectedValue} onChange={this.handleChange}>
<option value="">All</option>
{options.map(option => (
<option key={option} value={option}>{option}</option>
))}
</select>
<ul>
{filteredData.map(item => (
<li key={item.id}>{item.name}</li>
))}
</ul>
</div>
);
}
}
export default DropdownFilter;
在父组件中,可以使用两个"DropdownFilter"组件,并传递不同的数据和选项给它们:
import React, { Component } from 'react';
import DropdownFilter from './DropdownFilter';
class App extends Component {
constructor(props) {
super(props);
this.state = {
data: [
{ id: 1, name: 'Item 1', category: 'Category A' },
{ id: 2, name: 'Item 2', category: 'Category B' },
{ id: 3, name: 'Item 3', category: 'Category A' },
{ id: 4, name: 'Item 4', category: 'Category C' },
],
categories: ['Category A', 'Category B', 'Category C']
};
}
render() {
const { data, categories } = this.state;
return (
<div>
<DropdownFilter data={data} options={categories} />
<DropdownFilter data={data} options={categories} />
</div>
);
}
}
export default App;
这样,你就可以在同一个组件中使用两个可重用的下拉过滤器了。每个过滤器都可以根据选中的值对数据进行过滤,并显示过滤后的结果。
没有搜到相关的沙龙
领取专属 10元无门槛券
手把手带您无忧上云