Содержимое Seamtic UI React Accordion частично совпадает - PullRequest
Новая
       12

Содержимое Seamtic UI React Accordion частично совпадает

0 голосов
/ 01 ноября 2018

Я написал следующий код Typescript на основе примера на странице реакции Sematic UI. Проблема в том, что я вижу перекрывающееся содержимое, и независимо от того, где я нажимаю, выбирается только последний элемент. 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>
    );
  }
}
...