我正在尝试在表单上执行可折叠元素。我正在使用反应引导程序。
我期望的行为如下：一旦我单击“单击”按钮，内容就会出现<Collapse />并保持不变，直到我再次单击同一个按钮。
我的行为：一旦我单击“单击”按钮，就会出现一个折叠的元素，然后消失。
我刚刚从 react-bootstrap Collapse 示例 ( 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（抱歉链接，gif 大于 2 Mb）
PS 我用谷歌搜索了这个问题并没有发现任何东西（即来自 stackoverflow 的链接不起作用）。
经过一夜的清醒头脑，我意识到（只是准确地重新阅读文档）我应该使用 Bootstrap v3，而不是 v4（我想使用）。问题是，v4 不知何故没有.collpase.in类。对此的快速解决方法是使用display: block. 现在它运行良好。
本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句