标签: react-bootstrap

我在使用react-router和react-bootstrap时遇到了一些样式问题.下面是代码的片段

import { Route, RouteHandler, Link } from 'react-router';
import AuthService from '../services/AuthService'
import { Button, Nav, Navbar, NavDropdown, MenuItem, NavItem } from 'react-bootstrap';

    <Nav pullRight>
      <NavItem eventKey={1}>
        <Link to="home">Home</Link>
      </NavItem>
      <NavItem eventKey={2}>
        <Link to="book">Book Inv</Link>
      </NavItem>
      <NavDropdown eventKey={3} title="Authorization" id="basic-nav-dropdown">
        <MenuItem eventKey="3.1">
          <a href="" onClick={this.logout}>Logout</a>
        </MenuItem>          
      </NavDropdown>  
    </Nav>

这就是渲染时的样子.

我知道这<Link></Link>是造成这种情况但我不知道为什么？我希望这是在线.

我想绑定以关闭活动反应引导弹出窗口.这escape是代码

_handleEscKey:function(event){
         console.log(event);
        if(event.keyCode == 27){
          this.state.activePopover.hide();
        }
   },

  componentWillMount:function(){
     BannerDataStore.addChangeListener(this._onchange);
     document.addEventListener("click", this._handleDocumentClick, false);
     document.addEventListener("keyPress", this._handleEscKey, false);
   },


   componentWillUnmount: function() {
     BannerDataStore.removeChangeListener(this._onchange);
      document.removeEventListener("click", this._handleDocumentClick, false);
      document.removeEventListener("keyPress", this._handleEscKey, false);
   },

但是当我按任意键时,没有任何东西被记录在控制台中.我试图在窗口上也听不到这种情况."按键","键盘"等但似乎我做错了.

导入 Bootstrap 和 Jquery 后，编译时显示此错误。

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

global.jQuery = require('jquery');
require('bootstrap');

所以我试图select在reactjs中获取元素的值,但是无法理解它.将this.refs.selectElement.getDOMNode().value始终作为到来undefined.表单上的所有其他控件text都正常工作.有任何想法吗？难道你无法获得select元素的值,refs必须使用onChange事件吗？

更新:

var TestSelectClass = React.createClass({
  mixins: [Router.Navigation],

  _handleDube: function(event) {
    DubeActionCreators.DubeTest({
      message: this.refs.message.getDOMNode().value,
      tax: this.refs.tax.getDOMNode().value,
      validity: this.refs.valid_for.getDOMNode().value
    });
  },

  render: function() {
    return (
      <ReactBootstrap.ListGroup>
          <textarea
            className="form-control"
            rows="3"
            placeholder="Enter message"
            ref="message" >
          </textarea>
          <div className="input-group">
            <span className="input-group-addon" id="basic-addon1">$</span>
            <input type="text" className="form-control" placeholder="10" aria-describedby="basic-addon1" ref="tax" />
          </div>
        <Input type="select" value="1" ref="valid_for">
          <option value="1">1 hour</option>
          <option value="2">1 day</option>
          <option value="2">5 days</option>
        </Input>
      </ReactBootstrap.ListGroup>
    )
  }
});

更新:解决方案 …

有没有办法将样式组件与react-bootstrap一起使用？react-bootstrap公开bsClass属性而不是className它们的组件,这似乎与样式组件不兼容.

有经验吗？

我需要打开/关闭模态

$(元素).modal( '秀')

怎么做？

我有一个Input带按钮(buttonAfter属性)的组件,我设置了一个onClick与按钮关联的处理程序,因此用户可以键入一些文本,然后按下该按钮以触发正确的操作.

但是,我希望用户能够[Enter]按键(键代码13)以达到与单击按钮相同的效果,只是为了使UI更易于使用.

我找不到办法做到这一点,当然我试图onKeydown为按键事件注册一个处理程序,但它只是被忽略了.

我正在尝试使用react-bootstrap和web pack.我能够<Button>在页面上获得引导程序,但是没有附加样式？我安装了:

 "devDependencies": {
    "babel-core": "^5.1.11",
    "babel-loader": "^5.0.0",
    "css-loader": "^0.12.1",
    "react-hot-loader": "^1.2.2",
    "react-router": "^0.13.3",
    "webpack": "^1.7.2",
    "webpack-dev-server": "^1.7.0"
  },
  "dependencies": {
    "bootstrap": "^3.3.4",
    "react": "^0.13.0",
    "react-bootstrap": "^0.22.6",
    "whatwg-fetch": "^0.8.1"
  }
}

webpack.config.js中的加载器

  module: {
    loaders: [
      { test: /\.jsx?$/, loaders: ['react-hot', 'babel'], include: path.join(__dirname, 'app') },
      { test: /\.css$/, loader: "style-loader!css-loader" },
      { test: /\.png$/, loader: "url-loader?limit=100000" },
      { test: /\.jpg$/, loader: "file-loader" }
    ]
  }

我正在尝试创建一个以模态显示的表单.因此,当用户输入值时,该值存储在本地存储中.这是一张帮助您了解我的意思的图片:
这是表单的代码:

function FieldGroup({id, label, help, ...props}) {
    return (
        <ReactBootstrap.FormGroup controlId={id}>
            <ReactBootstrap.ControlLabel>{label}</ReactBootstrap.ControlLabel>
            <ReactBootstrap.FormControl {...props} />
            {help && <ReactBootstrap.HelpBlock>{help}</ReactBootstrap.HelpBlock>}
        </ReactBootstrap.FormGroup>
    );
}

const formInstance = (
    <form>
        <FieldGroup
            id="formControlsText"
            type="text"
            label="Text"
            placeholder="Recipe Name"
            inputRef={ref => { this.input = ref; }}
        />
        <ReactBootstrap.FormGroup controlId="formControlsTextarea">
            <ReactBootstrap.ControlLabel>Ingredients</ReactBootstrap.ControlLabel>
            <ReactBootstrap.FormControl componentClass="textarea" placeholder="Enter Ingredients" />
        </ReactBootstrap.FormGroup>
    </form>
);  

正如我在bootstrap React教程中所读到的,我应该添加
<FormControl inputRef={ref => { this.input = ref; }} /> 到FormControl道具中.但添加它后,我调用模态窗体时出错:

`

使用react-bootstrap而不是简单的旧Bootstrap有什么意义？

我正在浏览https://react-bootstrap.github.io/components.html,我认为没有任何优势.我只能看到它会给项目带来不必要的依赖.

在React/Redux项目中使用普通的Bootstrap有什么困难吗？

**编辑**

从阅读https://react-bootstrap.github.io/introduction.html中推断出来是唯一react-bootstrap能让我获得类名速记的东西吗？以下是同一页面的示例.

在plain boostrap我做:

var button = React.DOM.button({
  className: "btn btn-lg btn-success",
  children: "Register"
});

React.render(button, mountNode);

并在react-boostrap:

var button = ReactBootstrap.Button({
  bsStyle: "success",
  bsSize: "large",
  children: "Register"
});

React.render(button, mountNode);

所有这些bsStyle, bsSize, ...从react-boostrap都是人不喜欢的东西Angular有记得那些ng-*标签...我个人不介意,但如果它是唯一react-bootstrap给我,我会用twitter-bootstrap.还是我错过了什么？