如何在ReactJS中過濾數據收集

Question

我是ReactJS的新手，我試圖弄清楚它是如何工作的。

我在JsBin上玩了一下它，並且我已經成功地創建了一些組件來從api獲取數據...但是，當我嘗試實現代碼來過濾該集合時，我感到有點困惑 。

這是我試圖實現過濾器功能的JsBin link。

你能幫我理解爲什麼它不起作用嗎？謝謝。

Answer 1

在ContentList組件中，它應該使用this.props.filterText，它將採用輸入的值並與您的數據進行比較。當輸入值改變時，React將重新渲染包含this.state.filterText的組件。您可以使用map或filter方法對其進行過濾。這裏是一個例子：

var ContentList = React.createClass({ 

    render: function() { 
     var commentNodes = this.props.data.map(function(content) { 
       if(content.description === this.props.filterText){ <-- this makes the filter work ! 
        return <ItemRow title={content.owner.login} body={content.description} slug={content.owner.avatar_url}></ItemRow>} 
      }) 
     return (
      <div className='contentList'> 
       {commentNodes} 
      </div> 
     ) 
    } 
})