我想使用react-select
启用多选选项来过滤列。我不确定我是否采用了正确的方法,但是无论如何它根本不起作用:
这是每个列的属性:
Filter: ({ filter, onChange }) => this.customFilter({ fieldName: column.key, filter, onChange })
此方法的实现:
customFilter = ({ fieldName, filter, onChange }) => {
const options = [{value: '', label: 'Show All'}];
this.rowsGenerator(this.props.tableDefinition)
.map(item => item[fieldName])
.filter((item, i, s) => s.lastIndexOf(item) === i)
.map(value => {
options.push({value: value, label: value});
});
return (
<Select options={options}
isMulti={true}
onChange={onChange}
></Select>
);
}
这是我的渲染方法的外观:
render(): React.ReactNode {
return (
<>
<ReactTable
columns={this.state.columns}
data={this.rowsGenerator(this.props.tableDefinition)}
filterable={true}
filtered={this.state.filtered}
onFilteredChange={(filtered, column, value) => {
this.onFilteredChangeCustom(value, column.id || column.accessor);
}}
getTheadFilterThProps={() => {
return {
style: { overflow: 'visible' }
};
}}
/>
</>
);
关于过滤器更换方法:
onFilteredChangeCustom = (field, accessor) => {
const filtered = this.state.filtered;
let insertNewFilter = 1;
if (filtered.length) {
filtered.forEach((filter, i) => {
if (filter.id === accessor) {
if (filter.value.includes(field.value) || !field.value.length) {
filter.value.splice(i, 1);
} else {
filter.value.push(field.value);
}
insertNewFilter = 0;
}
});
}
if (insertNewFilter) {
filtered.push({id: accessor, value: [field.value]});
}
this.setState({filtered: filtered});
}
因此,当我更改任何过滤器onFilteredChangeCustom
时,就会得到类似的信息:
问题在于每一次更改都会使所有行消失,因此我的自定义过滤可能是错误的方式。有人可以帮我吗?