创建一个自定义过滤器

Question

我正在React中开发一个基于多选组合框的自定义过滤器。我创建了过滤器并将其添加到表格中，但是我无法定义自定义比较函数

这是过滤器组件

import React, { Component } from 'react'
import ReactDOM from "react-dom";
import Select from '@material-ui/core/Select';
import MenuItem from '@material-ui/core/MenuItem';
import Checkbox from '@material-ui/core/Checkbox';
import ListItemText from '@material-ui/core/ListItemText';
import Input from '@material-ui/core/Input';
import _ from 'lodash'
import PropTypes from 'prop-types'

class MultipleSelectionFilterComponent extends Component {

    state = {
        value: []

    }    

    componentWillMount(){
        this.setState({allValues:  this.context.getActivityStatuses() })        
    }

    valueGetter(data){
        return data
    }

    isFilterActive() {
        return this.state.value !== null && this.state.value !== undefined && this.state.value !== "";
    }    

    doesFilterPass(params){
        return this.state.text.toLowerCase()
            .split(" ")
            .every((filterWord) => {
                return this.valueGetter(params.node).toString().toLowerCase().indexOf(filterWord) >= 0;
            });
    }

    afterGuiAttached(params) {
        this.focus();        
    }

    focus() {
        window.setTimeout(() => {
            let container = ReactDOM.findDOMNode(this.refs.input);
            if (container) {
                container.focus();
            }
        });
    }

    onParentModelChanged(data){
        if(data != null){
            this.setState({value: data.filter})
        }else{
            this.setState({value: 'all'})    //sulla pressione del bottone "reset filter", data è nullo e così ripristino la select su {allLabel}
        }
    }

    getModel(){
        return this.state.value        
    }

    setModel(value){
        return this.setState({value})
    }

    onFloatingFilterChanged(params){
        return true;
    }    

    onChange = (event) => {
        //console.log("onChange: ",event)
        const filterInstance = this.props.api.getFilterInstance(this.props.column.colId)
        filterInstance.filterText = event.target.value === 'all' ? '' : event.target.value
        this.props.api.onFilterChanged()
    }

    render() {
        const { trueLabel, falseLabel, allLabel } = this.props
        const { allValues } = this.state
        let realValue = this.state.value

        //console.log("statevalues: ", allValues)

        return (            
            <Select 
                 multiple = {true}
                className="boolean-selector select"
                classes={{
                    selectMenu: 'select-menu'
                }}
                input={<Input id="select-multiple-checkbox" />}
                renderValue={selected => _.size(selected) + " selected"}
                onChange={this.onChange}
                value={realValue}>


               {Array.isArray(allValues) && allValues.map((item, index) =>
                {
                    //console.log("realValue: ",item)

                       return(
                                <MenuItem value={item.id} key={index} className="flex flex-row">
                                <Checkbox checked={realValue.indexOf(item.id) > -1} />
                                <ListItemText primary={item.statusName} />
                                </MenuItem>)
                })}


            </Select>
            );
    }        

    static defaultProps = {        
        allLabel: "All values"
    }

     static contextTypes={
        getActivityStatuses: PropTypes.func.isRequired
    }

}


export default MultipleSelectionFilterComponent

我在createColums方法中使用了它

createColumns = () =>{
        this.columns = [
            ...
            {
                headerName: "Status",
                field: "activity.activityStatus.id", 
                cellClass: 'flex items-center',                
                cellRendererFramework: ActivityStatusCellRenderer,
                //floatingFilterComponent:MultipleSelectionFilterComponent,
                floatingFilterComponentFramework: MultipleSelectionFilterComponent,                
                //filter: MultipleSelectionFilterComponent,
            }
             ....
        ]

        return this.columns
    }    

当我将上面的组件用作floatingFilterComponentFramework时，我可以看到组合框，但是无法开发自定义比较功能。

当我将上述组件用作filter时，看不到任何东西。...