web-dev-qa-db-ja.com

Bootstrapドロップダウンが機能しないReact

Reactコンポーネントの1つのフォーム内でドロップダウンを機能させようとしています。コードのドロップダウン部分を設定する方法を次に示します。以下は、返されるdivタグ内にあるフォームの親タグ内にあります。

//<div>
//<form>
//some code here

    <div className="row top-buffer">
        <div className="col">
            <div className="dropdown">
                <button 
                    className="btn btn-secondary dropdown-toggle" 
                    type="button" 
                    id="dropdownMenuButton" 
                    data-toggle="dropdown" 
                    aria-haspopup="true">
                    Dropdown
                </button>
                <div className="dropdown-menu" aria-labelledby="dropdownMenuButton">
                    <a className="dropdown-item" href="#nogo">Item 1</a>
                    <a className="dropdown-item" href="#nogo">Item 2</a>
                    <a className="dropdown-item" href="#nogo">Item 3</a>
                </div>
            </div>
        </div>
    </div>

//some code here
//</form>
//</div>

ただし、[ドロップダウン]ボタンをクリックしても、ドロップダウンメニューとその中のアイテムは表示されません。

他のすべてのbootstrapコンポーネントは正常に動作しています。何が悪いのですか？

編集：

私はindex.jsでbootstrapを参照しました：

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import 'bootstrap/dist/css/bootstrap.min.css'
import './App.css'
import registerServiceWorker from './registerServiceWorker';

ReactDOM.render(<App />, document.getElementById('root'));
registerServiceWorker();

何か不足していますか？

javascripttwitter-bootstrapreactjs
7
FlameDra

これは、HTMLとCSSを追加したが、jsは追加していないためです。ドロップダウンをクリックしても、コードは何をすべきかわかりません。 ここ は、その方法の例です。そして以下のコード：

class Dropdown extends React.Component {
  state = {
    isOpen: false
  };

  toggleOpen = () => this.setState({ isOpen: !this.state.isOpen });

  render() {
    const menuClass = `dropdown-menu${this.state.isOpen ? " show" : ""}`;
    return (
      <div className="dropdown" onClick={this.toggleOpen}>
        <button
          className="btn btn-secondary dropdown-toggle"
          type="button"
          id="dropdownMenuButton"
          data-toggle="dropdown"
          aria-haspopup="true"
        >
          Dropdown
        </button>
        <div className={menuClass} aria-labelledby="dropdownMenuButton">
          <a className="dropdown-item" href="#nogo">
            Item 1
          </a>
          <a className="dropdown-item" href="#nogo">
            Item 2
          </a>
          <a className="dropdown-item" href="#nogo">
            Item 3
          </a>
        </div>
      </div>
    );
  }
}

ReactDOM.render(<Dropdown />, document.getElementById("root"));
6
teimurjan

ドロップダウンメニューと他のjsのものを4番目に機能させるにはBootstrap次の手順に従う必要があります：npmで依存関係にインストールします。

npm i --save bootstrap jquery popper.js

それをindex.jsに追加します

import 'bootstrap';
import 'bootstrap/dist/css/bootstrap.css';
import 'bootstrap/dist/js/bootstrap.js';
import $ from 'jquery';
import Popper from 'popper.js';

すべてのステップは here から取得されます

1
AlexNikonov

bootstrap=モジュールとして追加-

npm i --save bootstrap

私の経験から、この行をindex.jsに追加して、もう一度お試しください-

import 'bootstrap';

どうなるか教えてください。

1
Vikram Gulia

長い検索と微調整の後、私はここで答えを得ました

この問題を解決するには、CSSを追加する必要があります。ドロップダウンボタンをクリックすると、その要素にクラス「show」が追加され、bootstrapのように、ドロップダウンボタンを機能させるにはそれで十分です。

.show>.dropdown-menu {
  display: block;
  position: absolute;
}

私にとってそれは魅力のように働きます。

私は@teimurjanソリューションを試してみましたが、うまくいきましたが、2つの問題がありました

  1. 必要ないのに状態管理しなきゃ
  2. ドロップダウンをクリックすると、展開されたメニューは、本体または他の場所をクリックしても消えません。
0
M K Garwa