如何在reactjs中切换项目数组

Posted 2023-02-19

【中文标题】如何在reactjs中切换项目数组

【英文标题】：how to toggle array of item in reactjs

【发布时间】：2022-01-14 07:40:29

【问题描述】：

我有一个数组。我想根据切换获取显示和隐藏数组项。当我点击第一个项目时，它会被展开，当我点击第二个项目时，第二个项目将被展开，而前一个项目将被隐藏。

class App extends Component 

  constructor() 
    super();
    this.state =  show: false ;
  

  handleClick() 
    this.setState(
      show: !this.state.show,
    );
  

  render() 
    return (
      <div className="App">
        [1, 2,3].map((item) => (
          <div>
            <button onClick=() => this.handleClick()>Toggle </button>
            <p>this.state.show === true ? 'SHOW' : 'HIDE'</p>
          </div>
        ))
      </div>
    );
  

这是我的尝试代码：https://stackblitz.com/edit/react-7y4pcs

【问题讨论】：

您只想通过布尔状态来实现吗？为什么不使用其他类型的值，例如存储 id 或其他东西

【参考方案1】：

解决方案测试项目：

    import React,  Component  from 'react';

class App extends Component 
  constructor() 
    super();
    this.state =  show: 0 ;
  

  handleClick(i) 
    this.setState(
      show: i,
    );
  

  render() 
    return (
      <div className="App">
        [1, 2, 3].map((item, i) => (
          <div key=i>
            <button onClick=() => this.handleClick(item)>
              Toggle item
            </button>
            <p
              style=
                display: this.state.show === item ? 'block' : 'none',
              
            >
              Some content item
            </p>
          </div>
        ))
      </div>
    );
  


export default App;

解决方案测试指标：

import React,  Component  from 'react';

class App extends Component 
  constructor() 
    super();
    this.state =  show: 0 ;
  

  handleClick(i) 
    this.setState(
      show: i,
    );
  

  render() 
    return (
      <div className="App">
        [1, 2, 3].map((item, i) => (
          <div key=i>
            <button onClick=() => this.handleClick(i)>
              Toggle item
            </button>
            <p
              style=
                display: this.state.show === i ? 'block' : 'none',
              
            >
              Some content item
            </p>
          </div>
        ))
      </div>
    );
  


export default App;

如果您想打开所有以前的，只需将测试“===”更改为“>=”

【讨论】：

不是真的，用item代替i

我编辑了它，但你的问题不清楚。此外，如果您没有明确说明原因，那么使用 item 而不是 i 是没有意义的。但这是一个使用它的新解决方案（我编辑了我的帖子）。如果您希望所有以前的内容都打开，只需将测试“===”更改为“>=”

【参考方案2】：

您可以将对象数组存储为状态并通过它进行映射。 在handleClick 方法中切换指定show 的show 属性：

class App extends Component 
  constructor() 
    super();
    this.state = 
      items: [
        
          id: 1,
          show: false,
        ,
        
          id: 2,
          show: false,
        ,
      ],
    ;
  

  handleClick(id) 
    const item = this.state.items.find((item) => item.id === id);
    const newItems = [...this.state.items];
    newItems.find(item => item.id === id).show = !item.show
    this.setState(
      items: newItems
    );
  

  render() 
    return (
      <div className="App">
        this.state.items.map((item) => (
          <div key=item.id>
            <button onClick=() => this.handleClick(item.id)>Toggle </button>
            <p>item.show ? 'SHOW' : 'HIDE'</p>
          </div>
        ))
      </div>
    );