React-таблица: пользовательский подбор не работает с множественным выбором (реагировать на выбор) - PullRequest
0 голосов
/ 01 октября 2019

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

enter image description here

Проблема в том, что каждое изменение приводит к исчезновению всех строк, поэтому, вероятно, моя пользовательская фильтрация выполнена неправильно. Может ли кто-нибудь помочь мне с этим?

...