React bootstrap открытие всех коллапсов - PullRequest
Новая
       39

React bootstrap открытие всех коллапсов

0 голосов
/ 27 мая 2020

Я получил этот пример из здесь и обновил, чтобы добавить еще одну новую кнопку с компонентом сворачивания. 

function Example() {
const [open, setOpen] = useState(false);

return (
<>
  <Button
    onClick={() => setOpen(!open)}
    aria-controls="example-collapse-text"
    aria-expanded={open}
  >
    click
  </Button>
  <Collapse in={open}>
    <div id="example-collapse-text">
      Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus
      terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer
      labore wes anderson cred nesciunt sapiente ea proident.
    </div>
  </Collapse>
  <Button
    onClick={() => setOpen(!open)}
    aria-controls="example-collapse-text"
    aria-expanded={open}
  >
    click
  </Button>
   <Collapse in={open}>
    <div id="example-collapse-text">
      Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus
      terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer
      labore wes anderson cred nesciunt sapiente ea proident.
    </div>
  </Collapse>
</>
);}

Я хочу знать, как я могу открыть только выбранный сворачивание. На данный момент, когда я нажимаю на любую из этих кнопок, открывается все.

Я не хочу поддерживать отдельное состояние для каждого коллапса, так как в моем случае это значение будет динамически предоставляться API, поэтому наличие 10 таких экземпляров коллапса означает поддержание 10 состояний. Есть ли лучшее решение для решения этой проблемы?

1 Ответ

0 голосов
/ 03 июня 2020

Нашел другой способ выполнить sh это без создания нового компонента. 

constructor(props, context) {
    super(props, context);
    this.state = {
        shown : {}
    };
}

toggle(index) {
    this.setState({
        shown: {
            ...this.state.shown,
            [index]: !this.state.shown[index]
        }
    });
}

А затем используйте это как: 

<Container id={index} key={index}>
...
...
   <Row>
       <Col onClick={() => this.toggle(index)}>Click</Col>
   </Row>
...
</Container>

И переключатель: 

<Collapse in={this.state.shown[index]}>
...
    <Row>
        ...
    </Row>
...
</Collapse>
...