时间戳

首页 > 解决方案 > 如何在 React 中分别切换多个显示

javascript - 如何在 React 中分别切换多个显示

问题描述

我有多个从 api 请求中获得的帖子。我希望每个帖子都有一个切换按钮，这样有人可以点击它，帖子的其余信息就会显示出来。当单击切换“显示更多”时，我当前是如何设置它的，它会打开所有帖子的所有显示。我正在使用 NPM react-toggle-display 包。我该如何设置它，以便每个帖子都可以从其他帖子同时切换它显示？

Posts.js：

import React, {Component} from 'react';
import axios from 'axios';
import styles from './posts.css';
import ToggleDisplay from 'react-toggle-display';

class Posts extends Component {

  constructor(props) {
    super(props)
    this.state = {
      posts: [],
      show : false
    }
  }

  handleClick() {
    this.setState({
      show: !this.state.show
    });
  }


  componentDidMount() {
    axios.get('/api/posts')
    .then(response => {
      console.log(response)
      this.setState({posts: response.data})
    })
    .catch(error => console.log(error))
  }

  render() {
    return (
      <div>
        <h1>Posts</h1>
        <div class="ui section divider"></div>
        {this.state.posts.map((post) => {
          return(
            <div key={post.id}>
              <img class="image" src={post.image}/>
              <p>
                <button onClick={ () => this.handleClick() }>Show More</button>
                {post.title}
              </p>
              <ToggleDisplay show={this.state.show}>
                <p>
                  {post.body}
                </p>
                <p>
                  <div dangerouslySetInnerHTML={{ __html: post.link }} />
                </p>
              </ToggleDisplay>
              <div class="ui section divider"></div>
            </div>
          )
        })}
      </div>
  );
}

}

export default Posts

标签： javascriptreactjstoggle

解决方案

您可以制作show一个对象，其中每个键都是一个post带有布尔值的 id，您可以使用它来显示该特定帖子。

例子

class Posts extends Component {
  state = {
    posts: [],
    show: {}
  };

  handleClick = id => {
    this.setState(prevState => ({
      show: { ...prevState.show, [id]: !prevState[id] }
    }));
  };

  componentDidMount() {
    axios
      .get("/api/posts")
      .then(response => {
        console.log(response);
        this.setState({ posts: response.data });
      })
      .catch(error => console.log(error));
  }

  render() {
    return (
      <div>
        <h1>Posts</h1>
        <div class="ui section divider" />
        {this.state.posts.map(post => {
          return (
            <div key={post.id}>
              <img class="image" src={post.image} />
              <p>
                <button onClick={() => this.handleClick(post.id)}>
                  Show More
                </button>
                {post.title}
              </p>
              <ToggleDisplay show={this.state.show[post.id]}>
                <p>{post.body}</p>
                <p>
                  <div dangerouslySetInnerHTML={{ __html: post.link }} />
                </p>
              </ToggleDisplay>
              <div class="ui section divider" />
            </div>
          );
        })}
      </div>
    );
  }
}

推荐阅读