如何在reactjs中切换项目数组答案

【问题标题】：how to toggle array of item in reactjs如何在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 或其他东西

标签： javascript reactjs redux

【解决方案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>
    );
  }
}

【讨论】：