Cách lọc thu thập dữ liệu trong ReactJS

Question

Tôi mới sử dụng ReactJS và tôi đang cố gắng tìm hiểu cách thức hoạt động của nó.

Tôi đã chơi với nó một chút trong JsBin và tôi đã tạo thành công một số thành phần để tìm nạp dữ liệu từ api ... nhưng, tôi cảm thấy hơi bối rối khi tôi thử triển khai mã để lọc bộ sưu tập đó .

Đây là số JsBin link mà tôi đang cố triển khai tính năng lọc.

Bạn có thể giúp tôi hiểu tại sao nó không hoạt động không? Cảm ơn bạn.

Answer 1

Trong thành phần ContentList, nên sử dụng this.props.filterText sẽ lấy giá trị của đầu vào và so sánh với dữ liệu của bạn. Khi giá trị đầu vào được thay đổi, React sẽ trả lại thành phần chứa this.state.filterText. Bạn có thể sử dụng phương pháp map hoặc filter để lọc. Dưới đây là ví dụ:

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