Javascript 如何使用语义用户界面打开多个手风琴？

我正在尝试使用包含多个条目的语义UI手风琴，并允许同时打开多个条目；每个条目都有一个标题部分，其中包含一个带有弹出窗口的图标和一个包含文本区域的内容区域

我希望能够同时打开两个accordion，这显然是通过在创建如中所述的accordion元素时使用

exclusive={false}

prop支持的

但该示例似乎使用了一个包含字符串内容的对象数组，而不是其他react/html/jsx元素（在我的例子中是语义ui图标、弹出窗口和文本区域）。该对象数组被传递到手风琴的

面板

道具

我不熟悉语义ui react accordion在跟踪索引和其他内容的情况下正确运行所需的功能，我不确定我还需要配置什么，或者语义ui组件是否可以按原样配置

实际上，我复制并使用了一个活动索引和一个onclick处理程序，它在组件反应状态下切换活动索引

下面是accordion和onclick处理程序和react应用程序状态的一个片段：

class FileUpload extends Component {

 // other stuff omitted 

  constructor(props) {
    super(props);

    this.state = {
      activeAccordionIndex: -1
    };

  handleAccordionClick = (e, titleProps) => {
     const { index } = titleProps;
     const { activeAccordionIndex } = this.state;
     const newIndex = activeAccordionIndex === index ? -1 : index;

     this.setState({
       activeAccordionIndex: newIndex
     })
   }

 // I'm using a small helper function to create the accordion and invoke it in 
 // the render method, just one item for brevity; the other entries are pretty 
 // much the same

getAccordionInputs() {

     const { activeAccordionIndex } = this.state;

     let accordionContent = (
      <Accordion fluid exclusive={false}>
         <Accordion.Title
           className="file-upload-ordinal-accord-title"
           active={activeAccordionIndex === 0}
           index={0}
           onClick={this.handleAccordionClick}
          >
           <Icon name='dropdown' />
           Enter Ordinal Features
           <Popup
             on="click"
             position="right center"
             header="Ordinal Features Help"
             content={
               <div className="content">
                 <p>Ordinal Features help description</p>
               </div>
             }
             trigger={
               <Icon
                 className="file-upload-ordinal-help-icon"
                 inverted
                 size="large"
                 color="orange"
                 name="info circle"
               />
             }
           />
         </Accordion.Title>
         <Accordion.Content
            active={activeAccordionIndex === 0}
          >
           <textarea
             className="file-upload-ordinal-text-area"
             id="ordinal_features_text_area_input"
             label="Ordinal Features"
             placeholder={"{\"ord_feat_1\": [\"MALE\", \"FEMALE\"], \"ord_feat_2\": [\"FIRST\", \"SECOND\", \"THIRD\"]}"}
             onChange={this.handleOrdinalFeatures}
           />
         </Accordion.Content>
       </Accordion>
     )
     return accordionContent;
   }

  }

类文件上载扩展组件{
//其他遗漏的内容
建造师（道具）{
超级（道具）；
此.state={
活动手风琴索引：-1
};
handleAccordionClick=（e，标题栏）=>{
常量{index}=标题行；
const{activeAccordionIndex}=this.state；
常数newIndex=ActiveAccordinationIndex==索引？-1：索引；
这是我的国家({
ActiveAccordinadex:newIndex
})
}
//我正在使用一个小的助手函数来创建手风琴并在中调用它
//render方法，为了简洁起见，只有一个条目；其他条目非常简单
//差不多
getputs（）{
const{activeAccordionIndex}=this.state；
让accordionContent=(
输入序号特征
)
返回手风琴内容；
}
}

---

我不知道如何设置它以允许多个手风琴同时打开非字符串的内容。这在语义ui accordion中是可能的吗？或者我需要找到替代解决方案和/或手动制作具有所需行为的作品吗？

您可以更改索引逻辑，而不是在用户界面中设置活动索引tate将索引添加到数组中，并检查它是否存在于数组中，以及是否显示该手风琴

以下是一个例子：

export default class AccordionExampleStandard extends Component {
  state = { activeIndexs: [] };

  handleClick = (e, titleProps) => {
    const { index } = titleProps;
    const { activeIndexs } = this.state;
    const newIndex = activeIndexs;

    const currentIndexPosition = activeIndexs.indexOf(index);
    if (currentIndexPosition > -1) {
      newIndex.splice(currentIndexPosition, 1);
    } else {
      newIndex.push(index);
    }

    this.setState({ activeIndexs: newIndex });
  };

  render() {
    const { activeIndexs } = this.state;

    return (
      <Accordion>
        <Accordion.Title
          active={activeIndexs.includes(0)}
          index={0}
          onClick={this.handleClick}
        >
          <Icon name="dropdown" />
          What is a dog?
        </Accordion.Title>
        <Accordion.Content active={activeIndexs.includes(0)}>
          <p>
            A dog is a type of domesticated animal. Known for its loyalty and
            faithfulness, it can be found as a welcome guest in many households
            across the world.
          </p>
        </Accordion.Content>

        <Accordion.Title
          active={activeIndexs.includes(1)}
          index={1}
          onClick={this.handleClick}
        >
          <Icon name="dropdown" />
          What kinds of dogs are there?
        </Accordion.Title>
        <Accordion.Content active={activeIndexs.includes(1)}>
          <p>
            There are many breeds of dogs. Each breed varies in size and
            temperament. Owners often select a breed of dog that they find to be
            compatible with their own lifestyle and desires from a companion.
          </p>
        </Accordion.Content>

        <Accordion.Title
          active={activeIndexs.includes(2)}
          index={2}
          onClick={this.handleClick}
        >
          <Icon name="dropdown" />
          How do you acquire a dog?
        </Accordion.Title>
        <Accordion.Content active={activeIndexs.includes(2)}>
          <p>
            Three common ways for a prospective owner to acquire a dog is from
            pet shops, private owners, or shelters.
          </p>
          <p>
            A pet shop may be the most convenient way to buy a dog. Buying a dog
            from a private owner allows you to assess the pedigree and
            upbringing of your dog before choosing to take it home. Lastly,
            finding your dog from a shelter, helps give a good home to a dog who
            may not find one so readily.
          </p>
        </Accordion.Content>
      </Accordion>
    );
  }
}

导出默认类AccordionExampleStandard扩展组件{
状态={activeIndexs:[]}；
handleClick=（e，titleProps）=>{
常量{index}=标题行；
const{activeIndexs}=this.state；
const newIndex=activeIndexs；
const currentIndexPosition=activeIndexs.indexOf（索引）；
如果（currentIndexPosition>-1）{
新索引拼接（currentIndexPosition，1）；
}否则{
newIndex.push（索引）；
}
this.setState（{activeIndexs:newIndex}）；
};
render（）{
const{activeIndexs}=this.state；
返回(
非常好的建议，非常感谢您的建议，我有点尴尬，因为我没有考虑修改逻辑，但感谢您指出一个简单的解决方案，效果非常好：）