reactjs - Reactjs隐藏和取消隐藏切换按钮上的所有记录单击

Question

Reactjs隐藏和取消隐藏切换按钮上的所有记录单击

我在数组中有三个记录。单击切换按钮时，我需要分别隐藏和取消隐藏每个记录。

我的问题是，每次单击特定的切换按钮时，它不会仅隐藏和取消隐藏该记录，而是隐藏和取消隐藏所有三个记录。

我想我需要{post.id}为每个Toggle Button设置一个。有人可以帮我吗

import React, { Component, Fragment } from "react";
import { render } from "react-dom";

class AutoButton extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      data: [],
      shown: true,
    };
  }

  componentDidMount() {
    this.setState({
      data: [
        { id: "1", title: "my first title" },
        { id: "2", title: "my second title"},
        { id: "3", title: "my third title" }
      ]
    });
  }


toggle() {
        this.setState({
            shown: !this.state.shown
        });
    }


  render() {

var shown = {
            display: this.state.shown ? "block" : "none"
        };

        var hidden = {
            display: this.state.shown ? "none" : "block"
        }





  return (
      <div>
        <label>
          <ul>
            {this.state.data.map((post, i) => (
              <li key={i}>
<h2 style={ shown }> {post.title} --{post.id} 

</h2>

<button onClick={this.toggle.bind(this)}>Toggle</button>


                <br />

              </li>
            ))}
          </ul>
        </label>
      </div>
    );
  }
}

标签： reactjs

Answer 1

一种方法是为数据中的每个项目添加一个标志，然后切换该标志：

class AutoButton extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      data: [],
      shown: true,
    };
  }

  componentDidMount() {
    this.setState({
      data: [
        { id: "1", title: "my first title", visible: true },
        { id: "2", title: "my second title", visible: true },
        { id: "3", title: "my third title", visible: true }
      ]
    });
  }


  toggle(id) {
    const newData = this.state.data.map(item => {
      if(item.id === id) {
        return { ...item, visible: !item.visible};
      }

      return item;
    })

    this.setState({
      data: newData
    });
  }


  render() {
    return (
      <div>
        <label>
          <ul>
            {this.state.data.map((post, i) => (
              <li key={i}>
                <h2 style={{ display: post.visible ? "block" : "none"}}> {post.title} --{post.id} </h2>
                <button onClick={this.toggle.bind(this, post.id)}>Toggle</button>
                <br />
              </li>
            ))}
          </ul>
        </label>
      </div>
    );
  }
}

编辑

另一种方法是跟踪隐藏的项目，如下所示：

class AutoButton extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      data: [],
      shown: true,
      hiddenItems: []
    };
  }

  componentDidMount() {
    this.setState({
      data: [
        { id: "1", title: "my first title" },
        { id: "2", title: "my second title" },
        { id: "3", title: "my third title" }
      ]
    });
  }


  toggle(id) {

    if(this.isHidden(id)) {
      const newHiddenItems = this.state.hiddenItems.filter(item => item !== id);
      this.setState({
        hiddenItems: newHiddenItems
       });
    } else {
      this.setState((state) => ({
        hiddenItems: state.hiddenItems.concat(id)
      }));
    }
  }

  isHidden(id) {
    return this.state.hiddenItems.includes(id);
  }

  render() {
    return (
      <div>
        <label>
          <ul>
            {this.state.data.map((post, i) => (
              <li key={i}>
                <h2 style={{ display: this.isHidden(post.id) ? "none" : "block"}}> {post.title} --{post.id} </h2>
                <button onClick={this.toggle.bind(this, post.id)}>Toggle</button>
                <br />
              </li>
            ))}
          </ul>
        </label>
      </div>
    );
  }
}