React Collapse - 如何切换列表中的项目？

Question

我正在显示数据库中的项目列表，对于每个项目，我都有一个按钮 "Show more/less"。单击此按钮后，我希望 show/hide 额外内容具有漂亮的幻灯片 down/up 效果。我已经在没有幻灯片 down/up 效果的情况下实现了此功能，但想使用 React Collapse 使其更加用户友好。

这是我尝试实现 React Collapse 功能的组件：

import React from 'react';
import ReactDOM from 'react-dom';
//import axios from 'axios';
import NewPost from './NewPost';
import {Collapse} from 'react-collapse';

class Posts extends React.Component {
    constructor(props) {
        super(props);

        this.toggleClass= this.toggleClass.bind(this);
        this.state = {
            activeIndex: null
        }
    }

    toggleClass(index, e) {     
        this.setState({ activeIndex: this.state.activeIndex === index ? null : index });
    };

    moreLess(index) {
        if (this.state.activeIndex === index) {
            return (
                <span>
                    <i className='fas fa-angle-up'></i> Less
                </span>
            );
        } else {
            return (
                <span>
                    <i className='fas fa-angle-down'></i> More
                </span>
            );                      
        }
    }

  render () {
        let content;

        if (this.props.loading) {
            content = 'Loading...';
        } else {
          content = this.props.posts.map((post, key) => {
            return(
              <li key={key}>
                <div>   
                  <span>{post.id}</span>
                  <span>{post.message}</span>
                  <button className="btn btn-primary btn-xs" onClick={this.toggleClass.bind(this, key)}>
                    {this.moreLess(key)}
                  </button>
                </div>
                <Collapse isOpened={true}>
                  <div className={'alert alert-info msg '+(this.state.activeIndex === key ? "show" : "hide")}>
                    {post.message}
                  </div>
                  </Collapse>
                </li>
              )
            });
        }
        return (
          <div>
            <h1>Posts!</h1>
            <div className="row">
              <div className="col-md-6">
                <ul>
                  {content}
                </ul>
              </div>
            </div>
        </div>
      );
  }
}

export default Posts

但是当我点击 More/less 按钮时，Collapse 中的内容没有出现 - 在点击按钮没有任何反应。

我在这里错过了什么？

Answer 1

您没有将正确的支票绑定到 <Collapse isOpened={true}>。你应该像这样放置 (this.state.)activeIndex === index (current item index) 而不是 true:

<Collapse isOpened={this.state.activeIndex === index}>

因此它实际上可能由于 activeIndex 而崩溃。我已经为你制作了 codesandbox，所以你可以确保它有效：https://codesandbox.io/s/jzx44ynyqw

但我认为这是其中最重要的部分（请注意，您的索引称为键，为了方便，我只是将其重命名）：

<li key={index}>
  <div>
    <p>{post.title}</p>
    <Collapse isOpened={activeIndex === index}>
      <div
       className={classNames("alert alert-info msg", {
                    show: activeIndex === index,
                    hide: activeIndex !== index
                  })}
      >
       {post.message}
      </div>
     </Collapse>
     <button
       className="btn btn-primary btn-xs"
       onClick={this.toggleClass.bind(this, index)}
      >
       {this.moreLess(index)}
      </button>
    </div>
   </li>

Answer 2

如果您正在使用函数和挂钩，我推荐这个

import { Collapse } from "react-collapse";
import classNames from "classnames";
import React, { useState} from 'react';

export default function yourFunction() {
    const [activeIndex, setActiveIndex] = useState(null);
    return(
    {groups.map((group, index) => (
        <button className="btn btn-primary navbar-toggler"
                type="button"
                data-toggle="collapse"
                onClick={event => setActiveIndex(
                    activeIndex === index ? null : index
                )}
                data-target="#collapseExample"
                aria-expanded="false"
                aria-controls="collapseExample">
                [CLICK HERE]
        </button>
        <Collapse isOpened={activeIndex === index}>
            <div
                className={classNames("alert alert-info msg", {
                    show: activeIndex === index,
                    hide: activeIndex !== index
                    })}
                >
               <a>[YOUR COLLAPSE CONTENT]</a>
             </div>
        </Collapse>
    )
}

React Collapse - 如何切换列表中的项目？

React Collapse - how do I toggle items in the list?

javascript

collapse

reactjs