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

Question

我从 api 请求中获得了多个 post。我希望每个 post 都有一个切换开关，以便有人可以单击它，post 的其余信息就会显示出来。当单击切换 "Show More" 它打开所有 post 的所有显示时，我目前如何设置它。我正在使用 NPM react-toggle-display 包。我如何设置它以便每个 post 可以切换它与其他 post 的同时显示？

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

Answer 1

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

例子

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>
    );
  }
}

Answer 2

有几种方法可以做到这一点，但基本上可以归结为每个 post 都有一个布尔值。

如果您想将所有状态保留在 posts 容器中，那么您可以向每个 posts 添加一个字段来跟踪 posts =] 已开放：

this.setState({posts: response.data.map(post => ({ ...post, show: false }))})

然后像这样渲染开关：

<ToggleDisplay show={post.show}>{...}</ToggleDisplay>

另一种方法是创建一个新的 Post 组件来跟踪它自己的状态。

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

How do I toggle multiple displays separately in React

javascript

toggle

reactjs