如何让下拉按钮在 React bootstrap 中工作？

Question

我正在使用 react-bootstrap 并且正在使用 dropdownbutton 组件。这出于某种原因没有 render。我想不通。任何帮助将不胜感激。基本不会出现。我还想知道我是否以正确的方式获取 dropdownbutton 的值。顺便说一句，我也进口了 href="https://maxcdn.bootstrapcdn.com/bootstrap/latest/css/bootstrap.min.css" 在索引文件中。

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>

        )
    }
}

Answer 1

react-bootstrap-table table（第 2 版）同时依赖于 jQuery 和 bootstrap，因此您必须同时包含它们以确保它能正常工作。

选项#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>

选项 #2

（如果你想使用 es6 的 import 来确保 npm 和 webpack 为你处理版本控制）：

里面 package.json:

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

在你的 webpack 配置中：

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

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

现在在你的组件中你可以使用：

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

一切都应该按预期工作

Answer 2

我通过使用 npm 安装 react-bootstrap 解决了这个问题。这基本上是我忘记安装的react-bootstrap（它包含使用reactjs编写的脚本）的症结所在。

如何让下拉按钮在 React bootstrap 中工作？

How to get dropdown-button working in react bootstrap?

reactjs

react-bootstrap

选项#1：

选项 #2