Seamtic UI React Accordion的内容重叠

时间:2018-11-01 19:00:33

标签: jquery reactjs typescript semantic-ui semantic-ui-react

我已基于Sematic UI react页面上的示例编写了以下Typescript代码。问题是我看到内容重叠,无论我在哪里单击,仅选择了最后一项。 enter image description here 我在这里想念的是什么?我尝试从父组件

的div元素中调用它

return();像这样

import { Accordion, Icon } from 'semantic-ui-react';
import React, { Component } from 'react';

export default class SampleAccordion extends Component<any, any> {

  constructor(props)
  {
    super(props);
    this.state = { activeIndex: 0 };

  }


  handleClick = (e, titleProps) => {
    const { index } = titleProps;
    const { activeIndex } = this.state;
    const newIndex = activeIndex === index ? -1 : index;
    console.log("index:" + index + " active index: " + activeIndex+ " newIndex: " + newIndex + " titleprops: " + titleProps);

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

  render() {
    const { activeIndex } = this.state;
    console.log("render: active index: " + activeIndex);
    return (
      <Accordion >
        <Accordion.Title active={activeIndex === 0} index={0} onClick={this.handleClick}>
          <Icon name='dropdown' />
          What is a dog?
        </Accordion.Title>
        <Accordion.Content active={activeIndex === 0}>
          <p>
            A dog is a type of domesticated animal. Known for its loyalty and faithfulness, it can
            be fo12und as a welcome guest in many households across the world.
          </p>
        </Accordion.Content>

        <Accordion.Title active={activeIndex === 1} index={1} onClick={this.handleClick}>
          <Icon name='dropdown' />
          What kinds of dogs are there?
        </Accordion.Title>
        <Accordion.Content active={activeIndex === 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={activeIndex === 2} index={2} onClick={this.handleClick}>
          <Icon name='dropdown' />
          How do you acquire a dog?
        </Accordion.Title>
        <Accordion.Content active={activeIndex === 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>
    );
  }
}

0 个答案:

没有答案