How to get dropdown-button working in react bootstrap?

问题

I am using react-bootstrap and am using the dropdownbutton component. This for some reason does not render. I am unable to figure it out. Any help will be appreciated. It basically does not show up. I also wanted to know if I am getting the value of the dropdownbutton the correct way. By the way I have also imported href="https://maxcdn.bootstrapcdn.com/bootstrap/latest/css/bootstrap.min.css" in the index file.

import {Component} from "react";
import fetch from "isomorphic-fetch";
import AddOnList from "./AddOnList";
import DebounceInput from "react-debounce-input";
import { DropdownButton } from 'react-bootstrap';
import { MenuItem } from 'react-bootstrap';


export default class AddOnSearch extends Component {

    constructor(props) {
        super(props);
        this.state = {};
    }

    componentDidMount() {
        fetch('/api/v1/addon')
            .then(response => {
                return response.json();
            })
            .then(json => {
                this.setState({allAddOns: json});
            })
    }

    setType(type) {
        this.setState({
            type: type,
            searchResults: null
        }, this.doSearch);

    }

    setQuery(query) {
        this.setState({
            query: query,
            searchResults: null
        }, this.doSearch);
    }

    doSearch() {
        if (this.state.type || this.state.query) {
            var url = "/api/v1/addon?";
            if (this.state.type) {
                url += "type=" + this.state.type;
            }
            if (this.state.query) {
                url += "&q=" + this.state.query;
            }
            fetch(url)
                .then(response => {
                    return response.json();
                })
                .then(json => {
                    this.setState({searchResults: json});
                });
        }
    }

    render() {
        return (
            <div className="row col-md-12 col-sm-12 col-xs-12 pushdown">
                <div className="col-lg-12">
                    <div className="input-group">

                        <div className="input-group-btn">
                            <DropdownButton className="dropdown-menu" onSelect={event => this.setType(event.target.eventKey)}>
                              <MenuItem eventKey="">All Types</MenuItem>
                              <MenuItem eventKey="OMOD">Module (OMOD)</MenuItem>
                              <MenuItem eventKey="OWA">Open Web App (OWA)</MenuItem>
                            </DropdownButton>
                        </div>

                        <DebounceInput
                            placeholder="Search..."
                            className="form-control"
                            minLength={1}
                            debounceTimeout={500}
                            onChange={event => this.setQuery(event.target.value)}
                        />

                    </div>
                </div>

                { (this.state.query || this.state.type) ?
                    <AddOnList addons={this.state.searchResults}/>
                    :
                    <AddOnList addons={this.state.allAddOns}/>
                }
            </div>

        )
    }
}

回答1:

The react-bootstrap-table table (ver 2) depends on both jQuery and bootstrap so you must include both of them to make sure it will work.

Option #1:

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

Option #2

(if you want to use es6's import to make sure npm & webpack handle the versioning for you):

inside package.json:

  "dependencies": {
    ....
    "bootstrap": "^3.0.0",
    "jquery": "^2.0.0"
  },

inside your webpack config:

  plugins: options.plugins.concat([
    ...

    new webpack.ProvidePlugin({
        jQuery: 'jquery',
        $: 'jquery',
        jquery: 'jquery'
    }),
  ])

Now inside your component you can use:

import $ from 'jquery';
import 'bootstrap/dist/js/bootstrap.min.js';

And everything should work as expected

回答2:

I solved the issue by installing react-bootstrap using npm. This basically is the crux of react-bootstrap(It contains the scripts written using reactjs) which I had forgotten to install.

来源：https://stackoverflow.com/questions/42137915/how-to-get-dropdown-button-working-in-react-bootstrap

标签

reactjs

react-bootstrap