全局表搜索反应

时间:2017-08-16 15:07:43

标签: javascript reactjs ecmascript-6 material-ui

我尝试使用新材料ui下一个表组件实现全局搜索,我有handleSearch方法,重生事件,而且我使用regexp检查event.target.value是否与表中相同。但是当我在搜索中删除字符串时,列不会更新。它开始只搜索我的开始类型。在这种情况下如何用数字搜索数字

const columns = [
    {
        dataKey: 'deviceType',
        label:'Device Type',
        numeric: false,
    }, {
        dataKey: 'deviceID',
        label:'Device ID',
        sortable: true,
        numeric: true,
        // cellRenderer: ({item, key}) =>
        //          <Button >Default</Button>,
    }, {
        ........
    }]

const data = [
    { key: 1, deviceType: 'Tag', deviceID: 1, name:'Tag For sending an ', location: 'Room_104', status: 'assigned'},
    { key: 2, deviceType: 'Tag', deviceID: 2, name:'Tag For sending an ', location: 'Room_104', status: 'assigned'},
    {.......},
]

class EnhancedTable extends Component {
    state = {
        selected: [],
        data,
        order: {
            direction: 'asc',
            by: 'deviceID',
        },
        search: '',
    }

    handleSearch = event => {
        debugger
        const {data} = this.state
        let filteredDatas = []
        filteredDatas = data.filter(e => {
            let mathedItems = Object.values(e)
            let returnedItems
            mathedItems.forEach(e => {
                const regex = new RegExp(event.target.value, 'gi')
                if (typeof e == 'string')
                    returnedItems = e.match(regex)
            })
            return returnedItems
        })
        this.setState({data: filteredDatas, search: event.target.value})
    }

    render = () => {

        const {data, search} = this.state

        return (
            <Paper>
                <Table
                    data={data}
                    search={search}
                    onSearch={this.handleSearch}
                />
            </Paper>)
    }
}
export default EnhancedTable 

1 个答案:

答案 0 :(得分:0)

my_original_query += " AND person_id in (temp_query_results)