全局搜索数据表 react答案

【问题标题】：Global search data table react全局搜索数据表 react
【发布时间】：2018-01-25 14:34:10
【问题描述】：

我需要在我的数据中创建全局搜索，并遍历数据中的所有对象并更新表的状态。做这个的最好方式是什么？在我的状态下，我收到数据数组，我有两种方法来处理这种行为。找不到我乱七八糟的东西？我尝试使用两种方法 handleSearch 和 handleSearchTest

 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'},
    { key: 3, deviceType: 'Tag', deviceID: 3, name:'Tag For sending an ', location: 'Room_104', status: 'assigned'},
    { key: 5, deviceType: 'AccessPoint', deviceID: 4, name:'AP_2 ', location: 'Room_104', status: 'offline'},
    { key: 4, deviceType: 'AccessPoint', deviceID: 5, name:'AP_1', location: 'Room_104', status: 'offline'},
]


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

    handleSearch = (event, value) => {
        // 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})
    }

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

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

        let previousLetterPosition = -1

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

            return previousLetterPosition !== -1
        })
    }

    handleSearchTest = (e, search) => {
        const {data} = this.state

        let result = data.filter(x => Object.keys(x).some(key =>
            this.fuzzyContains(x[key], search)
        ))

        this.setState({data: result})
    }


    render = () => {

        const {selected, data, search, order} = this.state

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

【问题讨论】：

标签： javascript reactjs ecmascript-6

【解决方案1】：

我只需要创建2个数据集，一个用于原始数据，一个用于过滤数据，并且只修改过滤数据而不是原始数据。

state = {
        selected: [],
        data,
        filteredData: data,
        order: {
            direction: 'asc',
            by: 'deviceID',
        },
        search: '',
    }

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

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

        let previousLetterPosition = -1

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

            return previousLetterPosition !== -1
        })
    }

handleSearch = search => {
        const {data} = this.state

        let filteredData = data.filter(x => Object.keys(x).some(key =>

            this.fuzzyContains(x[key], search)

        ))

        this.setState({filteredData, search})
    }

【讨论】：