ReactJS

Question

में डेटा संग्रह को फ़िल्टर करने के लिए कैसे करें मैं ReactJS के लिए नया हूं और मैं यह समझने की कोशिश कर रहा हूं कि यह कैसे काम करता है।

मैं जेएसबीन में थोड़ा सा खेल रहा था और मैंने एपीआई से डेटा लाने के लिए सफलतापूर्वक कुछ घटक बनाए हैं ... लेकिन, मुझे थोड़ा उलझन में लगा जब मैंने कोड को उस संग्रह को फ़िल्टर करने के लिए लागू किया है ।

यहां JsBin link है कि मैं फ़िल्टर सुविधा को लागू करने की कोशिश कर रहा था।

क्या आप यह समझने में मेरी सहायता कर सकते हैं कि यह क्यों काम नहीं कर रहा है? धन्यवाद।

Answer 1

ContentList घटक में, इसे this.props.filterText का उपयोग करना चाहिए जो इनपुट का मूल्य लेगा और आपके डेटा की तुलना करेगा। जब इनपुट मान बदल जाता है, तो प्रतिक्रिया उस घटक को फिर से प्रस्तुत करेगी जिसमें 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> 
     ) 
    } 
})