Я хотел отфильтровать столбцы, используя 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
срабатывает иЯ получаю что-то вроде этого:
Проблема в том, что каждое изменение приводит к исчезновению всех строк, поэтому, вероятно, моя пользовательская фильтрация выполнена неправильно. Может ли кто-нибудь помочь мне с этим?