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 <li className="list-group-item" data-category={item} key={index}>{item}</li>
    })
    return data
  }
  render(){
    return(
      <div>
        <fieldset className="form-group">
        <input className="form-control form-control-lg" placeholder="Search" onChange={()=>this.updateSearch()} value={this.state.search} type="text"/>
        </fieldset>
        <ul className="list-group">
          {this.filterList()}
        </ul>
      </div>
    )
  }
}

ReactDOM.render(<FilteredList/>, document.getElementById('app'));

DEMO

影片教學

您也可能喜歡這些文章

Copyright © 2018 ucamc