在Reactjs中为多个元素切换状态。

Question

我正在使用reactstrap的UncontrolledCollapse组件，我有多个静态元素需要控制。

默认情况下，我需要所有的元素都是默认打开的（不折叠），点击相关的单个元素就会被折叠。

但是我只有一个状态来管理这个行为，它将在点击时打开和关闭所有的面板。

下面是代码。

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

Answer 1

你需要在你的状态下创建单独的键。因为目前你正在为两个元素使用相同的状态道具，所以如果你关闭一个元素，两个元素都会被关闭。我还改变了切换方法（使是接受哪些元素被切换）。

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