Javascript 如何在react JS中创建动态搜索过滤器？

我尝试在reactjs中实现一个搜索过滤器，我尝试将方法绑定到'onChange'事件，但它会为每个字母触发。如何使它工作后，键入3个字母

    

     var FilteredList = React.createClass({
      filterList: function(event){
        var updatedList = this.state.initialItems;
        updatedList = updatedList.filter(function(item){
          return item.toLowerCase().search(
            event.target.value.toLowerCase()) !== -1;
        });
        this.setState({items: updatedList});
      },
      getInitialState: function(){
         return {
           initialItems: [
             "Apples",
             "Broccoli",
             "Chicken",
             "Duck",
             "Eggs",
             "Fish",
             "Granola",
             "Hash Browns"
           ],
           items: []
         }
      },
      componentWillMount: function(){
        this.setState({items: this.state.initialItems})
      },
      render: function(){
        return (
          <div className="filter-list">
            <form>
            <fieldset className="form-group">
            <input type="text" className="form-control form-control-lg" placeholder="Search" onChange={this.filterList}/>
            </fieldset>
            </form>
          <List items={this.state.items}/>
          </div>
        );
      }
    });
    
    var List = React.createClass({
      render: function(){
        return (
          <ul className="list-group">
          {
            this.props.items.map(function(item) {
              return <li className="list-group-item" data-category={item} key={item}>{item}</li>
            })
           }
          </ul>
        )  
      }
    });
    
    React.render(<FilteredList/>, document.getElementById('app'));

var FilteredList=React.createClass({
过滤器列表：函数（事件）{
var updatedList=this.state.initialItems；
updatedList=updatedList.filter（函数（项）{
return item.toLowerCase（）.search(
event.target.value.toLowerCase（））！=-1；
});
this.setState（{items:updatedList}）；
},
getInitialState:函数（）{
返回{
姓名首字母项目：[
“苹果”，
“西兰花”，
“鸡”，
“鸭子”，
“鸡蛋”，
“鱼”，
“格兰诺拉麦片”，
“杂凑布朗”
],
项目：[]
}
},
componentWillMount:function（）{
this.setState（{items:this.state.initialItems}）
},
render:function（）{
返回(
);
}
});
var List=React.createClass({
render:function（）{
返回(

{
this.props.items.map（函数（项）{
return
{item}
})
}

)  
}
});
React.render（，document.getElementById（'app'））；

，我试图为我的案例更改此代码，但我坚持在3个字母后触发它

---

任何想法都将不胜感激。

因为传递给输入字段onChange属性的函数在您在键盘上键入时都会被调用。如果event.target.value length的值大于或等于3，则可以在执行更新状态所需的任何更改之前检查该函数的内部

filterList: function(event){
    if(event.target.value.length >= 3) {
       // Here you can perform what you need
    }   
}

---

因为传递给输入字段onChange属性的函数在您在键盘上键入时被调用。如果event.target.value length的值大于或等于3，则可以在执行更新状态所需的任何更改之前检查该函数的内部

filterList: function(event){
    if(event.target.value.length >= 3) {
       // Here you can perform what you need
    }   
}

---

修改了

filterList

函数，使其仅在有3个字符可用时才开始搜索，否则，返回

initialItems

列表：

filterList: function(event){
    if(event.target.value.length > 2){
    var updatedList = this.state.initialItems;
    updatedList = updatedList.filter(function(item){
      return item.toLowerCase().search(
        event.target.value.toLowerCase()) !== -1;
    });
    this.setState({items: updatedList});
    }
    else{
      console.log(this.state.initialItems)
      this.setState({items: this.state.initialItems})
    }
  }

---

编辑：前面的答案贴在这里，和我做的一样。我添加了一个附加的

else

条件，以便在搜索栏上没有任何内容时返回整个列表。如果符合您的要求，请将其更改为

，否则。
修改了
过滤器列表
功能，仅在有3个字符可用时才开始搜索，否则，返回
初始项
列表：

filterList: function(event){
    if(event.target.value.length > 2){
    var updatedList = this.state.initialItems;
    updatedList = updatedList.filter(function(item){
      return item.toLowerCase().search(
        event.target.value.toLowerCase()) !== -1;
    });
    this.setState({items: updatedList});
    }
    else{
      console.log(this.state.initialItems)
      this.setState({items: this.state.initialItems})
    }
  }

编辑：前面的答案贴在这里，和我做的一样。我添加了一个附加的
else
条件，以便在搜索栏上没有任何内容时返回整个列表。如果符合您的要求，请将其更改为
，否则。
onChange
在
事件发生时触发。所以当
偶数.target.value
as values
input
标记被更改时，该函数被激活。与单击或单击提交按钮后激活的onClick或onSubmit等其他方法不同，每个更改都由
onChange
事件检测。这就是
onChange
和
onClick
之间的区别。如果你想在输入3个字母后进行搜索，那么有一个简单的方法。设置条件
value.length>=3
会有帮助

onChange
在
事件发生时触发。所以当
偶数.target.value
as values
input
标记被更改时，该函数被激活。与单击或单击提交按钮后激活的onClick或onSubmit等其他方法不同，每个更改都由
onChange
事件检测。这就是
onChange
和
onClick
之间的区别。如果你想在输入3个字母后进行搜索，那么有一个简单的方法。设置条件
value.length>=3
会有帮助

请分享您已经尝试过的内容。也许只有在输入框上有3个字符时才触发搜索功能这样简单的方法也可以实现同样的效果。请访问，看看是什么和。做一些研究，搜索相关话题等；如果您遇到困难，请发布您的尝试，记录输入和预期输出，最好是在@Samridh Tuladhr中添加代码示例，请分享您已经尝试过的内容。也许只有在输入框上有3个字符时才触发搜索功能这样简单的方法也可以实现同样的效果。请访问，看看是什么和。做一些研究，搜索相关话题等；如果你被卡住了，发布你的尝试，注意输入和预期输出，最好是在@Samridh Tuladhr中，代码示例addedEven认为这看起来很简单，但一旦用户清除了字段，我们必须找回原始的选择项列表，但这里没有：）在您的代码中，@Imran Rafiq是一个不错的开发者，上面是演示：）虽然看起来很简单，但一旦用户清除了字段，我们必须找回您的代码中没有出现的原始选择项列表：）作为@Imran Rafiq，而不是上面提到的一位优秀的开发人员，演示在上面：）