全局表搜索反应答案

【问题标题】：Global table search react全局表搜索反应
【发布时间】：2017-08-16 15:07:42
【问题描述】：

我尝试使用新材料 ui 下一个表组件实现全局搜索，我有 handleSearch 方法，它接收事件，然后我使用正则表达式检查 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

【问题讨论】：

据我了解，您正在尝试搜索数字。您可以在 javascript 中将数字转换为字符串。
如果你说你希望它在每次删除一个字符时搜索，或者你希望它在删除搜索字段中的所有字符后更新表，我有点困惑?如果是后者，您似乎只需要更新正则表达式以检查空字符串，如果搜索字段为空，则返回所有项目。

标签： javascript reactjs ecmascript-6 material-ui

【解决方案1】：

 fuzzyContains = (text, search) => {
        debugger
        if (!text)
            return false
        if (!search)
            return true

        search = search.toLowerCase()
        text = text.toString().toLowerCase()

        let previousLetterPosition = -1

        return search.split('').every(s => {
            debugger
            previousLetterPosition = text.indexOf(s, previousLetterPosition + 1)

            return previousLetterPosition !== -1
        })
    }

    handleSearch = search => {
        const {data} = this.state
        // debugger
        let filteredData = data.filter(x => Object.keys(x).some(key =>
            // debugger
            this.fuzzyContains(x[key], search)
        ))
        console.log(filteredData)
        this.setState({filteredData, search})
    }

【讨论】：