ReactJs 打开后折叠关闭

Question

我正在尝试在我的表单上执行可折叠元素。我正在使用 react-bootstrap.

我期望的行为如下：一旦我单击按钮 "click"，内容就会出现在 <Collapse /> 中并一直保留到我再次单击相同的按钮。

我的行为：单击按钮 "click" 后，出现一个折叠的元素，然后消失。

我刚刚从 react-bootstrap 折叠示例 (https://react-bootstrap.github.io/utilities/transitions/) 的文档中复制了代码。他们网站上的示例效果很好。正如我所注意到的，为两个示例（在我的机器上和文档中）设置的样式是相同的。那么，为什么会发生这种情况以及如何解决？

Index.cshtml

<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="width=device-width" />
    <title>Index</title>
    <link rel="stylesheet" href="~/dist/bundle.css" />
  </head>
  <body>
    <header>
      <nav class="navbar navbar-expand fixed-top dev">
        <div>Character bio</div>
      </nav>
    </header>

    <main role="main" class="container mt-5">

      <div id="content" class="row text-center mt-5">

      </div>

      <div class="row text-center mt-5 mb-3">
        <div class="col">
          <p className="text-muted">© 2018</p>
        </div>
      </div>
    </main>

    <script src="~/dist/bundle.js"></script>
  </body>
</html>

app.jsx

import "bootstrap/dist/css/bootstrap.min.css";
import "../css/common.css";

import { library } from "@fortawesome/fontawesome-svg-core";
import { faDice } from "@fortawesome/free-solid-svg-icons";
import { faHighlighter } from "@fortawesome/free-solid-svg-icons";

import React from "react";
import ReactDOM from "react-dom";
import Routes from "./routing/routes.jsx";
import { BrowserRouter, Link } from "react-router-dom";

import { Button, Collapse, Well } from "react-bootstrap";


library.add(
  faDice,
  faHighlighter
);

class Example extends React.Component {
  constructor(props, context) {
    super(props, context);

    this.state = {
      open: false
    };
  }

  render() {
    return (
      <div>
        <Button onClick={() => this.setState({ open: !this.state.open })}>
          click
        </Button>
        <Collapse in={this.state.open}>
          <div>
            <Well>
              Anim pariatur cliche reprehenderit, enim eiusmod high life
              accusamus terry richardson ad squid. Nihil anim keffiyeh
              helvetica, craft beer labore wes anderson cred nesciunt sapiente
              ea proident.
            </Well>
          </div>
        </Collapse>
      </div>
    );
  }
}

ReactDOM.render(
  <Example />,
  document.getElementById("content")
)

module.hot.accept();

发生的事情的 gif：https://dropmefiles.com/C7NPU（抱歉 link，gif 大于 2 Mb）

P.S。我用谷歌搜索了这个问题，但一无所获（即来自 Whosebug 的 links 不工作）。

Answer 1

经过一夜的清醒，我意识到（只是准确地重新阅读了文档）我应该使用 Bootstrap v3，而不是 v4（我想使用）。问题是，v4 不知何故没有 .collpase.in class。快速修复是将此 class 添加到 display: block。现在它运行良好。

ReactJs 打开后折叠关闭

ReactJs Collapse toglles-off after being opened

collapse

reactjs

react-bootstrap