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表格（第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＆＃39; s import来确保npm＆amp; 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编写的脚本），我忘了安装它。

如何在反应引导程序中使用下拉按钮？

2 个答案:

选项＃1：

选项＃2