एक छोटा सा मुंहतोड़ सवाल...

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

वांछित प्रभाव:
एक बार जब कोई उपयोगकर्ता किसी विशिष्ट रेपो के कार्ड पर क्लिक करता है तो मैं रिपोजिटरी काम प्रदर्शित करने का प्रयास कर रहा हूं। जब तक वे एक बटन दबाते हैं तब तक कमिट छिपे रहते हैं। यदि उपयोगकर्ता कमिट दिखाते समय बटन पर क्लिक करता है, तो उसे कमिट छिपाना चाहिए। रेपो कार्ड को लगातार क्लिक करना दिखाना/छिपाना/दिखाना/छिपाना/आदि होना चाहिए। उपयुक्त प्रतिबद्ध कार्ड।

function Home() {
    const title = "Projects"
    const message = "Projects fetched from Github using their GQL API."
    const [clicked, setClicked] = useState(false)
    const [repoInfo, setRepoInfo] = useState({ name: "Website", owner: "FernandoH-G" })

    return (
        <Container>
            <Jumbo title={title} message={message} />
            <CardDeck>
                <RepoCards clicked={clicked} setClicked={setClicked} setRepoInfo={setRepoInfo} />
            </CardDeck>
            <br/>
            <CardDeck>
                {clicked && <CommitCards repoInfo={repoInfo} />}
            </CardDeck>
        </Container>
    );
}
function RepoCards(props) {
    const { loading, error, data } = useQuery(GET_PINNED_REPOS);
    const [radioValue, setRadioValue] = useState("");

    if (loading) return (
        <Loading
            message="Fetching pinned repositories..."
            color="secondary" />
    )
    if (error) return (
        <Loading
            message="Error fetching pinned repositories."
            color="danger" />
    )
    const pinEdges = data.user.pinnedItems.edges

    return (
        pinEdges.map((pin, idx) => (
            <Card
                key={pin.node.name}
                className="text-center"
                border="light">
                <Card.Body>
                    <Card.Header as="h5"> {pin.node.name}</Card.Header>
                    <Card.Link href={pin.node.url}>
                        <Card.Img variant="top" src={chooseIMG(pin.node.name)} />
                    </Card.Link>
                    <Card.Text> {pin.node.description}</Card.Text>
                </Card.Body>
                <ButtonGroup toggle>
                    <ToggleButton
                        key={pin.node.name}
                        type="radio"
                        variant="outline-secondary"
                        name="Button Radio"
                        value={pin.node.name}
                        checked={radioValue === pin.node.name}
                        onChange={(e) => setRadioValue(e.currentTarget.value)}
                        onClick={() => {
                            console.log(`${idx} card clicked. click value: ${props.clicked}`)
                            props.setRepoInfo(
                                {
                                    name: pin.node.name,
                                    owner: pin.node.owner.login
                                })
                            props.setClicked(!clicked) // This should work,right?

                            // if (radioValue === pin.node.name) {
                            //  // props.setClicked(prevVal => !prevVal)
                            //  props.setClicked(false)
                            // } else {props.setClicked(true)}
                        }}>
                        Last Update:{' '}
                        {parseDate(pin.node.pushedAt)}
                    </ToggleButton>
                </ButtonGroup>
            </Card>
        ))
    )
}

मैं CommitCards घटक कोड शामिल कर रहा हूं, हालांकि मुझे नहीं लगता कि यह आवश्यक है।

const CommitCards = (props) => {
    const name = props.repoInfo.name
    const owner = props.repoInfo.owner
    const { loading, error, data } = useQuery(GET_REPO_COMMITS, {
        variables: { name, owner },
    });
    if (loading) return (
        <Loading message={`Fetching ${name} commits...`} color="secondary" />
    );
    if (error) return (
        <Loading message={`Error fetching ${name} commits.`} color="danger" />
    );

    const commits = data.repository.defaultBranchRef.target.history.edges
    return commits.map(com => (
        <Card
            key={com.node.url}
            bg={"dark"}
            style={{ color: "white" }}
            border="info">
            <Card.Body>
                <Card.Link href={com.node.url}>
                    Commit Date:{'\n'}
                    {parseDate(com.node.committedDate)}
                </Card.Link>
                <Card.Text>
                    {parseText(com.node.message)}
                </Card.Text>
            </Card.Body>
        </Card>
    ))
}

कंसोल को देखने और क्लिक की गई स्थिति को रिकॉर्ड करने के बाद, यह एक रेंडरिंग समस्या हो सकती है। मैं यह इसलिए कहता हूं क्योंकि ऐसा लगता है कि यह सब कुछ दो बार प्रस्तुत कर रहा है, इस प्रकार क्लिक किए गए मूल्य के साथ खिलवाड़ कर रहा है।

मुझे नहीं पता। मैं अब कुछ दिनों से इस पर हूं। प्रत्येक बटन पर क्लिक करने के बाद कंसोल आउटपुट का स्क्रीनशॉट नीचे दिया गया है। कमिट्स भी दिखाने में विफल; मेरी इच्छा के प्रभाव के करीब नहीं।

console output

बहुत बड़ा विकास

@deckele के सुझाव के बाद, मैं एक कोड सैंडबॉक्स पर काम कर रहा था। जब मैंने देखा कि मेरा प्रारंभिक कोड पोस्ट किया गया है ... वास्तव में काम करता है, सॉर्टा। मैं निश्चित रूप से पोस्ट किए गए कोड को अनुकूलित कर सकता हूं। मैं कोड सैंडबॉक्स में काम करने के लिए प्रतिक्रिया-बूटस्ट्रैप प्राप्त करने में सक्षम नहीं था, लेकिन यह बेहतर के लिए निकला।

यह पता चला है कि एक <ToggleButton> कंसोल पर एक क्लिक के रूप में लेबल, टेक्स्ट भाग पर क्लिक करने को दो बार पढ़ता है। हालांकि, आपको वास्तविक इनपुट क्षेत्र बहुत छोटा हिट करना होगा। आप कोड सैंडबॉक्स में एक क्लिक के रूप में पंजीकृत लेबल की जांच कर सकते हैं।
input_covered
दुर्भाग्य से, इनपुट क्षेत्र लेबल द्वारा कवर किया गया है, जो अनिवार्य रूप से संपूर्ण बटन है।

चूंकि इस प्रश्न ने एक मोड़ लिया है, मैं इसे बंद कर दूंगा, और शायद एक नया प्रतिक्रिया-बूटस्ट्रैप खोलूंगा।

4
FernandoH-G 18 फरवरी 2021, 04:47
क्या आप कृपया इस समस्या का कोडसैंडबॉक्स प्रदान कर सकते हैं?
 – 
deckele
21 फरवरी 2021, 02:27

1 उत्तर

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

इसे काम करने के शायद और भी तरीके हैं।

मुझे लगता है कि आप Home में clicked स्थिति का उपयोग किए बिना दूर हो सकते हैं - अगर मुझे कुछ याद नहीं है तो मुझे यकीन नहीं है कि आपको इसकी आवश्यकता क्यों होगी

आप ऐसा कर सकते हैं:

1. Home में

  • केवल repoInfo रखें और clicked से छुटकारा पाएं
  • repoInfo को null या उस मान के साथ आरंभ करें जिसे आप माउंट पर लोड करना चाहते हैं
  • repoInfo और setRepoInfo को नीचे RepoCards पर पास करें
  • clicked चेक को reportInfo से बदलें
function Home() {
  const title = 'Projects';
  const message = 'Projects fetched from Github using their GQL API.';
  const [repoInfo, setRepoInfo] = useState({
    name: 'Website',
    owner: 'FernandoH-G',
  }); // if you initiate repoInfo with `null` you won't have a repo selected in mount

  return (
    <Container>
      <Jumbo title={title} message={message} />
      <CardDeck>
        <RepoCards
          setRepoInfo={setRepoInfo}
          reportInfo={repoInfo}
        />
      </CardDeck>
      <br />
      <CardDeck>{repoInfo && <CommitCards repoInfo={repoInfo} />}</CardDeck>
    </Container>
  );
}

2. RepoCards में

  • radioValue से छुटकारा पाएं - आप इसका उपयोग नहीं करेंगे; आप repoInfo का उपयोग करके checked मान निर्धारित कर सकते हैं
  • onClick को ToggleButton से हटा दें और केवल onChange को कुछ इस तरह बदल दें
<ToggleButton
  key={pin.node.name}
  type="radio"
  variant="outline-secondary"
  name="Button Radio"
  value={pin.node.name}
  checked={props.reportInfo && props.reportInfo.name === pin.node.name}
  onChange={() => {
    const newReportInfo =
      props.reportInfo && props.reportInfo.name === pin.node.name
        ? null
        : {
            name: pin.node.name,
            owner: pin.node.owner.login,
          };
    props.setRepoInfo(newReportInfo);
  }}
>
  Last Update: {parseDate(pin.node.pushedAt)}
</ToggleButton>;

0
bamse 20 फरवरी 2021, 14:28
नमस्ते। क्लिक ने होम में रेपोइन्फो के समान उद्देश्य पूरा किया। दुर्भाग्य से, आपके सुझावों का वह प्रभाव नहीं है जिसकी मुझे तलाश है। रेपो बटन को लगातार क्लिक करने से प्रतिबद्ध कार्ड नहीं दिखते/छुपाते/दिखाते हैं/आदि नहीं होते हैं। इसे एक बार क्लिक करने से कमिट कार्ड एक बार प्रदर्शित होने के बाद छिपते भी नहीं हैं। मैंने अपनी इच्छा के प्रभाव पर जोर देने के लिए अपना प्रश्न संपादित किया है।
 – 
FernandoH-G
20 फरवरी 2021, 12:36
मैंने नोटिस किया है कि आपके सुझाव बहु रेंडर मुद्दों को हल करने लगते हैं। क्या आप बता सकते हैं कि ऐसा क्यों है? जब मानचित्र घटकों की बात आती है तो क्या ऑनक्लिक बस कई रेंडर की ओर ले जाता है?
 – 
FernandoH-G
20 फरवरी 2021, 12:41
मेरा पहला अनुमान था कि आपको कई रेंडर मिले हैं क्योंकि ToggleButton पर आपके पास 2 क्रियाएं हैं। बटन पर क्लिक करने से onChange और onClick दोनों कॉल आती हैं: onChange घटक की स्थिति को अपडेट करता है और onClick पैरेंट में एक मान बदलकर - प्रॉप्स में बदलाव को ट्रिगर करता है। मुझे समझ में नहीं आता कि ऐसा क्यों लगता है कि आपको वास्तव में onClick को फिर से प्रस्तुत करने के लिए बुलाया गया है। क्या ToggleButton किसी पुस्तकालय या आपके द्वारा बनाई गई किसी चीज़ का घटक है? क्या यह संभव है कि यह एक effect का उपयोग करता है और कुछ प्रॉप्स परिवर्तनों पर onClick को कॉल करता है?
 – 
bamse
20 फरवरी 2021, 14:22
रेपो बटन को लगातार क्लिक करने से कमिट कार्ड नहीं दिखते/छिपाते/दिखाते हैं/आदि नहीं होते हैं।: मैंने onChange फ़ंक्शन को RepoCards में संपादित किया है। यह चाल चलनी चाहिए - सुनिश्चित नहीं है कि कौन सी घटना ToggleButton उत्सर्जित कर रही है इसलिए मैंने जो कुछ भी हम जानते हैं उसका उपयोग किया
 – 
bamse
20 फरवरी 2021, 14:28
ToggleButton react-bootstrap से है पुस्तकालय।
 – 
FernandoH-G
20 फरवरी 2021, 22:27