ReactJs Collapse отключается после открытия - PullRequest
Новая
       26

ReactJs Collapse отключается после открытия

0 голосов
/ 23 октября 2018

Я пытаюсь выполнить складной элемент в моей форме.Я использую response-bootstrap.

Я ожидаю следующего поведения: как только я нажимаю кнопку «щелкнуть», содержимое помещается в <Collapse /> и остается до тех пор, пока я снова не нажму ту же кнопку.

Поведение, которое я получил: как только я нажимаю кнопку «щелкнуть», появляется свернутый элемент, а затем исчезает.

Я только что скопировал код из документации по реакции-bootstrap Свернуть пример(https://react -bootstrap.github.io / утилиты / переходы / ).Пример на их сайте работает просто отлично.Как я заметил, стили, заданные в обоих примерах (на моей машине и в документации), одинаковы.Итак, почему такое происходит и как это исправить?

  • 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 Мб)

PS Я гуглилпроблема и ничего не нашел (т.е. ссылки из stackoverflow не работают).

1 Ответ

0 голосов
/ 24 октября 2018

После ночи и со свежим умом я понял (просто точно перечитал документ), что я должен использовать Bootstrap v3, а не v4 (который я хочу использовать).Дело в том, что у v4 почему-то нет класса .collpase.in.Быстро исправить это, добавив этот класс с display: block.Теперь это работает очень хорошо.

...