如何让下拉按钮在反应引导程序中工作? [英] How to get dropdown-button working in react bootstrap?

问题描述

我正在使用 react-bootstrap 并且正在使用 dropdownbutton 组件.由于某种原因，这不会渲染.我无法弄清楚.任何帮助将不胜感激.基本不会出现.我还想知道我是否以正确的方式获取 dropdownbutton 的值.顺便说一下，我也导入了href="https://maxcdn.bootstrapcdn.com/bootstrap/latest/css/bootstrap.min.css" 在索引文件中.

import {Component} from "react";从同构获取"中导入获取；从./AddOnList"导入AddOnList；从react-debounce-input"导入 DebounceInput；从'react-bootstrap' 导入 { DropdownButton };从'react-bootstrap'导入{菜单项}；导出默认类 AddOnSearch 扩展组件 {构造函数(道具){超级(道具)；this.state = {};}componentDidMount() {fetch('/api/v1/addon').then(响应 => {返回 response.json();}).then(json => {this.setState({allAddOns: json});})}设置类型(类型){this.setState({类型:类型，搜索结果:空}, this.doSearch);}设置查询(查询){this.setState({查询:查询，搜索结果:空}, this.doSearch);}做搜索(){if (this.state.type || this.state.query) {var url = "/api/v1/addon?";如果(this.state.type){url += "type=" + this.state.type;}如果(this.state.query){url += "&q=" + this.state.query;}获取(网址).then(响应 => {返回 response.json();}).then(json => {this.setState({searchResults: json});});}}使成为() {返回 (<div className="row col-md-12 col-sm-12 col-xs-12 pushdown"><div className="col-lg-12"><div className="输入组"><div className="input-group-btn"><DropdownButton className="dropdown-menu" onSelect={event =>this.setType(event.target.eventKey)}><MenuItem eventKey="">所有类型</MenuItem><MenuItem eventKey="OMOD">模块(OMOD)</MenuItem><MenuItem eventKey="OWA">打开网络应用程序 (OWA)</MenuItem></下拉按钮>

<去抖动输入占位符=搜索..."className="表单控件"最小长度={1}去抖动超时={500}onChange={event =>this.setQuery(event.target.value)}/>

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

)}}

解决方案

我通过使用 npm 安装 react-bootstrap 解决了这个问题.这基本上是我忘记安装的 react-bootstrap(它包含使用 reactjs 编写的脚本)的关键.

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>

        )
    }
}

解决方案

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.

这篇关于如何让下拉按钮在反应引导程序中工作?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！