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;