如何让多个手风琴以语义 UI 反应打开？

Question

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

我希望能够同时打开两个手风琴，这显然是在制作手风琴元素时使用 exclusive={false} 道具支持的，如 documentation here[=16 中所述=]

但是那个例子看起来使用了一个 objects 的数组，内容是一个字符串，而不是其他 react/html/jsx 元素（在我的例子中它是语义 ui 图标，弹出窗口和文本区域）。该 objects 数组被传递给手风琴的 panel 道具。

而且我不熟悉什么语义 ui react accordion requires 可以正确运行并跟踪索引和其他内容，我不确定我还需要配置什么或如果按原样使用语义 ui 组件是可能的。

我基本上复制了 this example 并使用了一个活动索引和一个在组件反应状态下切换活动索引的 onclick 处理程序。

这里是手风琴和 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;
   }

  }

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

Answer 1

您可以更改索引逻辑，而不是在您的状态下设置活动索引，而是将索引添加到数组中并检查它是否存在于数组中以及它是否显示手风琴

这是一个例子：

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

https://codesandbox.io/s/xo226wp5lw?module=example.js

如何让多个手风琴以语义 UI 反应打开？

How to have multiple accordions open with semantic UI react?

javascript

user-interface

semantic-ui

semantic-ui-react