如何使用Accordion元素外部的Button切换Accordion组件？

Question

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

因为我已经为该组件创建了一个单独的Accordion.js文件，所以我尝试在该PostCard.js文件上编写onClick={Accordion.handleClick}。"handleClick“函数当前是在Accordion.js中触发折叠的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字段

Actual:显示Accordion字段的唯一方法是单击当前Accordion标题图标。

Answer 1

您应该为该函数设置ref：

编辑:我忘了toggleAccordion只有在组件挂载后才会被定义。下面是一个更完整的示例。

手风琴js

class Accordion extends Component {
  constructor(props) {
    super(props);
    this.state = {
      opened: false,
    };
    // The actual function
    this.handleToggle = this.handleToggle.bind(this);
  }

  componentDidMount() {
    const { setRef } = this.props;
    // Sending 'this' as argument to access class methods
    setRef(this);
  }

  // Function that needs to be called
  handleToggle() {
    const { opened } = this.state;
    this.setState({
      opened: !opened,
    });
  }

  render() {
    const { className, children, title } = this.props;
    const { opened } = this.state;
    const openClass = opened ? 'open' : '';
    return (
      <div className={`accordion ${className}`}>
        <div className="accordion-title">
          <button
            className={`accordion-btn ${openClass}`}
            type="button"
            onClick={this.handleToggle}
          >
            {title}
          </button>
        </div>
        <div className={`accordion-content ${openClass}`}>
          {children}
        </div>
      </div>
    );
  }
}

容器js这将从accordion组件获取引用

class Container extends Component {
  constructor(props) {
    super(props);
    this.handleClick = this.handleClick.bind(this);
  }

  handleClick() {
    if (this.accordion) {
      // Calling the needed function
      this.accordion.handleToggle();
    }
  }

  render() {
    const { className } = this.props;
    return (
      <div className={className}>
        <Card.Content>
          // Here we set the reference to accordion component
          <AccordionDropDown setRef={(el) => { this.accordion = el; }} />
        </Card.Content>
        <Button floated="right" onClick={this.handleClick}>
          <Icon name="angle down" style={{ margin: 0 }}></Icon>
        </Button>
      </div>
    );
  }
}

Answer 2

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