使用按钮映射时如何通过子组件中的按钮显示/隐藏父组件中的组件？

Question

有点拗口的问题……

我查看了十几个类似的问题，但它们要么与同一文件中的组件有关，要么与单个按钮有关。

想要的效果：
一旦用户单击特定存储库的卡片，我就会尝试显示存储库提交。提交被隐藏，直到他们按下按钮。如果用户在提交显示时单击按钮，它应该隐藏提交。连续单击回购卡应显示/隐藏/显示/隐藏/等。适当的提交卡。

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

查看控制台，记录点击状态后，可能是渲染问题。我这样说是因为它似乎将所有内容渲染了两次，从而弄乱了 clicked 的值。

我不知道。我已经在这几天了。下面是单击每个按钮后控制台输出的屏幕截图。提交甚至没有显示；没有达到我想要的效果。

巨大的发展

按照@deckele 的建议，我正在处理code sandbox，当时我注意到我的初始代码已发布...实际上可以正常工作。我绝对可以优化发布的代码。我无法让 react-bootstrap 在代码沙箱中工作，但结果变得更好。

事实证明，<ToggleButton> 将单击标签（文本部分）读取为两次单击控制台。但是，您必须点击 非常小的 实际输入区域。您可以在代码沙箱中查看注册为单击的标签。

不幸的是，输入区域被标签覆盖了，这实际上是整个按钮。

由于这个问题发生了转变，我将关闭这个问题，并可能打开一个新的 react-bootstrap 问题。

Answer 1

可能有更多的方法可以让这个工作。

我认为您可以在不使用 Home 中的 clicked 状态的情况下逃脱 - 如果我没有遗漏某些东西，我不确定您为什么需要它

你可以：

1。在Home

• 只保留repoInfo，去掉clicked
• 使用null 或您要在装载时加载的值初始化repoInfo
• 将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 的值
• 从ToggleButton 中删除onClick 并仅使用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>;