Reactjs 如何使用手风琴元素外部的按钮切换手风琴组件？

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

由于我已经为组件创建了一个单独的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>
        )
      }
    }

state={activeIndex:0}
handleClick=（e，titleProps）=>{
常数{index}=titleProps
const{activeIndex}=this.state
const newIndex=activeIndex==索引？-1:索引
this.setState（{activeIndex:newIndex}）
}
render（）{
const{activeIndex}=this.state
返回(
)
}
}

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

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

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

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

预期：单击按钮将切换手风琴字段以显示

---

实际：显示手风琴字段的唯一方法是单击当前手风琴标题图标。

您应该为该功能设置参考：

编辑： 我忘了直到安装组件时才定义toggleacordion。 下面是一个更完整的示例

手风琴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>
    );
  }
}

类手风琴扩展组件{
建造师（道具）{
超级（道具）；
此.state={
开：错，
};
//实际功能
this.handleToggle=this.handleToggle.bind（this）；
}
componentDidMount（）{
const{setRef}=this.props；
//将“this”作为参数发送到访问类方法
setRef（本）；
}
//需要调用的函数
手语{
const{opened}=this.state；
这是我的国家({
打开：！打开，
});
}
render（）{
const{className，children，title}=this.props；
const{opened}=this.state；
const openClass=open？“open”：“”；
返回(
{title}
{儿童}
);
}
}

容器js 这将从手风琴组件获取参考

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

类容器扩展组件{
建造师（道具）{
超级（道具）；
this.handleClick=this.handleClick.bind（this）；
}
handleClick（）{
如果（这是手风琴）{
//调用所需的函数
这个。手风琴。手风琴（）；
}
}
render（）{
const{className}=this.props；
返回(
//这里，我们将引用设置为accordio组件
{this.accordion=el；}}/>
);
}
}

您应该为该功能设置ref：

编辑： 我忘了直到安装组件时才定义toggleacordion。 下面是一个更完整的示例

手风琴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>
    );
  }
}

类手风琴扩展组件{
建造师（道具）{
超级（道具）；
此.state={
开：错，
};
//实际功能
this.handleToggle=this.handleToggle.bind（this）；
}
componentDidMount（）{
const{setRef}=this.props；
//将“this”作为参数发送到访问类方法
setRef（本）；
}
//需要调用的函数
手语{
const{opened}=this.state；
这是我的国家({
打开：！打开，
});
}
render（）{
const{className，children，title}=this.props；
const{opened}=this.state；
const openClass=open？“open”：“”；
返回(
{title}
{儿童}
);
}
}

容器js 这将从手风琴组件获取参考

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

类容器扩展组件{
建造师（道具）{
超级（道具）；
this.handleClick=this.handleClick.bind（this）；
}
handleClick（）{
如果（这是手风琴）{
//调用所需的函数
这个。手风琴。手风琴（）；
}
}
render（）{
const{className}=this.props；
返回(
//这里，我们将引用设置为accordio组件
{this.accordion=el；}}/>
);
}
}

试试手风琴。切换

导出函数ExampleCustomToggle（）{
返回(
点击我！
你好！我是尸体
点击我！
你好！我是另一个人
);
}

试试手风琴。切换

导出函数ExampleCustomToggle（）{
返回(
点击我！
你好！我是尸体
点击我！
你好！我是另一个人
);
}

感谢您的回复。在添加您编写的Accordion.js代码时，我收到11个错误，“setToggle不是一个函数”。知道为什么会发生这种情况吗？@jakedewarsettoggle必须是一个带有接收另一个函数或对象的函数的道具。我用更复杂的语言编辑了代码