ReactJS'de veri toplama nasıl filtrelenir

Question

ReactJS konusunda yeniyim ve nasıl çalıştığını anlamaya çalışıyorum.

Ben JsBin onunla biraz oynuyordum ve başarılı bir API veri getirmek için bazı bileşenleri oluşturduk ... ama bu koleksiyon filtrelemek için kod uygulamak denedim, ben biraz karıştı hissetti .

Filtre özelliğini uygulamaya çalıştığım JsBin link işte burada.

Neden çalışmadığını anlamak için bana yardımcı olabilir misiniz? Teşekkür ederim.

Answer 1

ContentList bileşeninde, girdinin değerini alacağınız ve verilerinizle karşılaştırabileceğiniz this.props.filterText kullanılmalıdır. Giriş değeri değiştirildiğinde, React this.state.filterText'u içeren bileşeni yeniden oluşturur. Filtrelemek için map veya filter yöntemini kullanabilirsiniz. İşte bir örnek:

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> 
     ) 
    } 
})