filter函數特性：

遍歷每個元素，回傳 true 時，目前的值會保留在陣列內，這會回傳一個新陣列，而不是修改原本的陣列。

原理

當input輸入文字時觸發onChenge事件，event.target.value值存入this.state.search，再利用this.state.search使用filter()回圈過濾data內的資料。

程式碼

class FilteredList extends React.Component{
  constructor(props){
    super(props)
    this.state = {
      data:[],
      search:''
    }
  }
  componentDidMount(){
    this.setState({
       data:[
         "Apples",
         "Broccoli",
         "Chicken",
         "Duck",
         "Eggs",
         "Fish",
         "Granola",
         "Hash Browns"
       ],
      search:''
    }
    )
  }
  updateSearch(){
    this.setState({
      data:this.state.data,
      search:event.target.value
    })
  }
  filterList(){
    let updatedList = this.state.data.filter((item)=>{
      return item.toLowerCase().indexOf(this.state.search.toLowerCase()) !== -1
    })
    let data = updatedList.map((item,index,array)=>{
      return 
{item}
    })
    return data
  }
  render(){
    return(
      

        

        this.updateSearch()} value={this.state.search} type="text"/>
        
        

          {this.filterList()}
        
      
    )
  }
}

ReactDOM.render(, document.getElementById('app'));

DEMO

影片教學