反应表:自定义装配不适用于多选(反应选择)

时间:2019-10-01 14:42:11

标签: javascript reactjs react-select react-table

我想使用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

问题在于每一次更改都会使所有行消失,因此我的自定义过滤可能是错误的方式。有人可以帮我吗?

0 个答案:

没有答案