在 Reactjs 中切换多个元素的状态

Posted 2023-03-23

【中文标题】在 Reactjs 中切换多个元素的状态

【英文标题】：toggle state for multiple elements in Reactjs

【发布时间】：2019-07-14 06:11:27

【问题描述】：

我正在使用来自 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>
    );
  

【参考方案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>
        )
    

【讨论】：

我可以创建多个状态，但如果要切换的元素超过 5 或 10 个，那么我必须创建 10 个不同的状态？

@H.Husain 在state 中，创建具有 2 个属性的对象数组。 text 和 toggle。将Test Content 1 等添加到text 属性。循环遍历这个数组，创建多个UncontrolledCollapse，并根据索引设置toggle属性

@adiga ：这是我的问题，我无法循环通过 UncontrolledCollapse，因为我在每个 UncontrolledCollapse 元素中都有不同的内容。

@H.Husain 这就是我说 2 个属性的原因。一个text 属性保持Test Content 等。另一个保持toggle 状态。如果每个UncontrolledCollapse 之间有进一步的区别，可以在数组的每个对象中创建更多属性