React客户端实时搜索功能的实现

1 效果

在搜索框中输入内容后，列表即时渲染匹配的元素，不需要回车或按钮

2 思路

1. 除了原始的列表数据，state中增加一个用于渲染的空列表
2. 通过onChange事件实时获取输入框的值
3. 当输入框值为空时，渲染列表等于原始列表
4. 输入框值不为空时，先将渲染列表设为空，然后遍历原始列表，如果有匹配的元素则加入到渲染列表

3 代码

import React from 'react';

class List extends React.Component{
    constructor(props){
        super(props);
        this.state = {
            listData: [原始列表数据],
            list2show: []//用于渲染的列表
        }
    }

    // 实时更改渲染列表的数据
    search(event){
        var keyword = event.target.value

        if(keyword){
            var listData = this.state.listData
            var list2show = []
            for (var i=0; i<listData.length; i++){
                if(listData[i].match(keyword)){
                    list2show = [...list2show, listData[i]]
                }
            }

            this.setState({
                list2show: list2show
            })
        }
        else{
            this.setState({
                list2show: this.state.listData
            })
        }
    }

    render(){
        // 使用渲染列表的数据，而不是原始列表
        const Item = this.state.list2show.map((item, index) => 
            <p key={index}>item</p> // 不建议使用index作为key，最好元素本身带有key
        )

        return(
            <div>
                <input onChange={this.search.bind(this)}/> // 搜索框
                <ul>{Item}</ul>
            </div>
        )
    }
}

export default List;