состояние переключения для нескольких элементов в Reactjs - PullRequest
Новая
       31

состояние переключения для нескольких элементов в Reactjs

0 голосов
/ 20 февраля 2019

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

По умолчанию мне нужно, чтобы все элементы были открыты по умолчанию (не свернуто), при щелчке связанный элемент будет свернут.

Но у меня есть только одно состояние для управления поведением, которое будет открывать и закрывать все панели при нажатии.

Ниже приведен код: 

import { UncontrolledCollapse, Button, CardBody, Card } from "reactstrap";

class ProductList extends React.PureComponent {
  constructor(props) {
    super(props);
    this.state = {
      isOpen: true
    };
  }

  toggle() {
    this.setState({
      isOpen: !this.state.isOpen
    });
  }

  render() {
    return (
      <div>
        <div
          className="filter-options-title"
          id="toggler"
          onClick={this.toggle}
        >
          Test
        </div>
        <UncontrolledCollapse toggler="#toggler" isOpen={this.state.isOpen}>
          <div className="filter-options-content">Test Content</div>
        </UncontrolledCollapse>
        <div
          className="filter-options-title"
          id="toggler1"
          onClick={this.toggle}
        >
          Test
        </div>
        <UncontrolledCollapse toggler="#toggler1" isOpen={this.state.isOpen}>
          <div className="filter-options-content">Test Content</div>
        </UncontrolledCollapse>
      </div>
    );
  }
}

1 Ответ

0 голосов
/ 20 февраля 2019

Вам нужно создать отдельные ключи в вашем штате.Потому что в настоящее время вы используете одно и то же состояние для обоих элементов, поэтому, если вы закроете один из них, оба будут закрыты.Я также изменил метод переключения (made is accept, элементы которого переключаются). 

 import { UncontrolledCollapse, Button, CardBody, Card } from 'reactstrap';
class ProductList extends React.PureComponent {
constructor(props) {
    super(props);
    this.state = {
        toggler: true,
        toggler1: true,
    }

}
toggle(toggler) {
    let togglerStatus = this.state[toggler]; //check the status of the toggle you clicked
    this.setState({
        [toggler]: !togglerStatus // change the status only for the toggle you clicked
    });
}
render() {
    return (
        <div>
            <div className="filter-options-title" id="" onClick={() => this.toggle('toggler')}>
                Test
            </div>
            <UncontrolledCollapse toggler="#toggler" isOpen={this.state['toggler']}>
                <div className="filter-options-content">
                    Test Content
                </div>
            </UncontrolledCollapse>
            <div className="filter-options-title" id="toggler1" onClick={() => this.toggle('toggler1')}>
                Test
            </div>
            <UncontrolledCollapse toggler="#toggler1" isOpen={this.state['toggler1']}>
                <div className="filter-options-content">
                    Test Content
            </div>
            </UncontrolledCollapse>
        </div>
    )
}

}

...