javascript - 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

您需要在您所在的州创建单独的 key 。因为目前你对这两个元素使用相同的状态 Prop ，所以如果你关闭一个，两个元素都会关闭。我还更改了切换方法(接受哪些元素被切换)。

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