React如何实现文本框中输入关键字进行实时搜索？

Question

我在搜索组件中的代码如下:
搜索组件是子组件，在输入框添加了onChange事件对应的函数searchHandler，里面用到了该组件属性中从父组件传来的回调函数searchUser

searchHandler:function(ev){
    var text = ev.target.value;
    this.props.searchUser(text);
},

render:function(){
    return (
        <div id="btnNav" className="col-md-3">
            <form className="form">
                <div>
                    <label htmlFor="username">用户名：</label>
                    <input ref="username" id="username" type="text" className="form-control" /><br/>
                    <label htmlFor="password">密码：</label>
                    <input ref="password" id="password" type="text" className="form-control" /><br/>
                    <button className="btn btn-info" onClick={this.addUserHandler}>添加用户</button><br/>
                </div>
                <div className="mt20">
                    <label htmlFor="search">按照用户名搜索用户：</label>
                    <input id="search" onChange={this.searchHandler} type="text" className="form-control" />
                </div>
            </form>
        </div>
    )
}

现在不知道如何在父组件中去渲染回调函数的结果，下面是我目前的代码，我的问题是，如果我把搜索出的结果text，通过filter，然后用setState()去改变了父组件的state进行重新渲染，那么父组件的状态就回不到原来在输入框里输入前的状态了。如果我这时再把输入框内容清空，那原来的列表也都不见了。

searchUser:function(text){
    var newText = text.toLowerCase();
    var newArr = this.state.userList.filter(function(item){
        return item.username.toLowerCase().indexOf(newText) != -1;
    });

    console.log(newArr);

    this.setState(function(){
        return {
            userList:newArr
        }
    });
},

Answer 1

state里再写一个值

{
    userList: arr,
    searchResult: anotherArr
}