मैं यह पता लगाने की कोशिश कर रहा हूं कि मैप किए गए सरणी को कैसे फ़िल्टर किया जाए और शेष परिणाम उसी घटक में गायब हो जाएं। मैंने रिएक्ट राउटर के साथ भी ऐसा ही किया है क्योंकि मैं परिणाम को एक अलग पेज पर रूट कर सकता हूं लेकिन मैं सोच रहा हूं कि क्या उसी घटक पर ऐसा करने का कोई तरीका है? मेरे पास एक निर्देशिका घटक (नीचे) है जो पृष्ठ पर वस्तुओं के परिणाम प्रदर्शित करने के लिए एक सरणी के माध्यम से मानचित्रण कर रहा है।

मैं तत्वों में से एक पर क्लिक करना चाहता हूं और बाकी को हटाना चाहता हूं। मैंने उसी घटक में फ़िल्टर विधि को शामिल करने का प्रयास किया लेकिन मुझे इसे कैसे कार्यान्वित करना चाहिए, इस पर रिक्त स्थान खींचना। मुझे जानने दो जो आप सोचते हो!


import React from 'react'
import { Card, CardImg} from 'reactstrap'

function Presentational({example, onClick}){
    return(
        <Card onClick={()=> onClick(example.name) }>
            <CardImg src={example.image}/>
        </Card>
    )
}

function Directory(props){

    const examples = props.propExample.map(example=>{
        return (
            <div>
                <Presentational example={example} onClick={props.onClick} />
            </div>
        )
    })

    return(
        <div>
            {examples}
        </div>
    )
}

export default Directory;

0
Jason Todd 30 नवम्बर 2020, 06:31

1 उत्तर

सबसे बढ़िया उत्तर

आप चयन के लिए यूज़स्टेट हुक का उपयोग कर सकते हैं

हम क्लिक किए गए तत्वों को चयनित राज्य चर के अंदर संग्रहीत करते हैं। यूजस्टेट हुक का उपयोग करना। जब उपयोगकर्ता तत्व पर क्लिक करता है तो प्रतिक्रिया घटक याद रखेगा कि उसने किस तत्व पर क्लिक किया था और 1 क्लिक किए गए तत्व [selected] से एक सरणी प्रस्तुत करेगा।

चयन को साफ करने के लिए, बस setSelected() पर कॉल करें

यह वही तर्क है जो आप चाहते हैं।

import React, {useState} from 'react'
import { Card, CardImg} from 'reactstrap'

function Presentational({example, onClick}){
    return(
        <Card onClick={()=> onClick(example.name) }>
            <CardImg src={example.image}/>
        </Card>
    )
}

function Directory(props){
    const [selected, setSelected] = useState()
    const examples = (selected ? [selected] : props.propExample).map(example=>{
        return (
            <div>
                <Presentational example={example} onClick={(name) => {
                     props.onClick(name)
                     setSelected(example)
                  }}
                />
            </div>
        )
    })

    return(
        <div>
            {examples}
        </div>
    )
}

export default Directory;

यदि आप इसे फ़िल्टर क्लॉज के साथ करना चाहते हैं तो यह लगभग समान दिखाई देगा, लेकिन अतिरिक्त संचालन के साथ

import React, {useState} from 'react'
import { Card, CardImg} from 'reactstrap'

function Presentational({example, onClick}){
    return(
        <Card onClick={()=> onClick(example.name) }>
            <CardImg src={example.image}/>
        </Card>
    )
}

function Directory(props){
    const [selected, setSelected] = useState()
    const examples = props.propExample.filter(it => typeof selected === 'undefined' || it.name === selected).map(example=>{
        return (
            <div>
                <Presentational example={example} onClick={(name) => {
                     props.onClick(name)
                     setSelected(name)
                  }}
                />
            </div>
        )
    })

    return(
        <div>
            {examples}
        </div>
    )
}

export default Directory;
0
rockTheWorld 30 नवम्बर 2020, 04:20