时间戳

首页 > 解决方案 > 如何使用 Accordion 元素外部的按钮切换 Accordion 组件？

reactjs - 如何使用 Accordion 元素外部的按钮切换 Accordion 组件？

问题描述

我正在尝试构建一个在单击时切换手风琴组件的按钮。该按钮存在于与手风琴展开区域不同的页面部分，但是我仍然想用所述按钮切换手风琴。

由于我为组件创建了一个单独的 Accordion.js 文件，因此我尝试在 PostCard.js 文件上编写 onClick={Accordion.handleClick} 。“handleClick”函数当前是触发 Accordion.js 中的 Accordion 的 onClick，但是我现在想将该操作从当前位置更改为新的切换按钮。

Accordion.js - Accordion 和 handleClick 当前工作的地方：

    state = { activeIndex: 0 }

      handleClick = (e, titleProps) => {
        const { index } = titleProps
        const { activeIndex } = this.state
        const newIndex = activeIndex === index ? -1 : index

        this.setState({ activeIndex: newIndex })
      }

      render() {
        const { activeIndex } = this.state

        return (
          <Accordion>
            <Accordion.Title active={activeIndex === -1} index={0} onClick= . 
  {this.handleClick}>
              <Icon name='dropdown'/>
            </Accordion.Title>
            <Accordion.Content active={activeIndex === -1}>
            <Card.Content>
              <ProgressBar />
            </Card.Content>
            </Accordion.Content>
          </Accordion>
        )
      }
    }

PostCard.js - 我希望切换的按钮所在的位置：

  <Button floated="right" onClick={<AccordionDropDown />}>
    <Icon name="angle down" style={{ margin: 0 }}></Icon>
  </Button>

以及手风琴在卡片中显示的部分：

 <Card.Content>
    <AccordionDropDown />
  </Card.Content>

预期：单击按钮将切换 Accordion 字段以显示

实际：显示 Accordion 字段的唯一方法是单击当前 Accordion Title 图标。

标签： reactjsbuttontoggleaccordionsemantic-ui

解决方案

尝试Accordion.Toggle

export function ExampleCustomToggle() {
    return (
        <Accordion defaultActiveKey="0">
            <Card>
                <Card.Header>
                    <Accordion.Toggle as={Button} variant="link" eventKey="0">Click me!</Accordion.Toggle>
                </Card.Header>
                <Accordion.Collapse eventKey="0">
                    <Card.Body>Hello! I'm the body</Card.Body>
                </Accordion.Collapse>
            </Card>
            <Card>
                <Card.Header>
                    <Accordion.Toggle eventKey="1">Click me!</Accordion.Toggle>
                </Card.Header>
                <Accordion.Collapse eventKey="1">
                    <Card.Body>Hello! I'm another body</Card.Body>
                </Accordion.Collapse>
            </Card>
        </Accordion>
    );
}

推荐阅读