标签: react-bootstrap

我正在为我的项目使用react-bootstrap,我正在尝试向按钮组件添加自定义bsStyle属性.如果我根据以下链接http://react-bootstrap.github.io/components.html#buttons使用默认引导类,则正确呈现类名.但是,如果我将属性更改为bsStyle='facebook'它渲染btn-undefined

所以简而言之,当我将bsStyle属性传递给react bootstrap中的组时,我无能为力.

这是我的HTML看起来像

<Button id="facebook-btn" bsStyle="facebook" bsSize="large" block>
</Button>

如果我将我的代码更改为

<Button id="facebook-btn" bsStyle="primary" bsSize="large" block>
</Button>

它工作正常,类正确呈现.

这是控制台html日志

滚动时如何防止内容浮动在Navbar后面？

<Navbar className="navbar-form navbar-fixed-top" responsive collapseable brand='x' inverse toggleNavKey={1} onClick={this.handleMouseDown}>

还是在:

<Nav className="navigation"..

谢谢

我正在尝试使用react-bootsrap在react中实现类似的目标：http://www.bootply.com/T0v2NlXryW

我的反应代码现在是这样的，但不起作用：

<Table>
<thead>
    <tr>
        <th>Job Name</th>
        <th>Description</th>
        <th>Provider Name</th>
        <th>Region</th>
        <th>Status</th>
    </tr>
</thead>
<tbody>
    <tr data-toggle="collapse" data-target="#demo1" className="accordion-toggle">
        <td>OBS Name</td>
        <td>OBS Description</td>
        <td>hpcloud</td>
        <td>nova</td>
        <td> created</td>
    </tr>
    <tr>
        <td colspan="12" className="hiddenRow">
            <div className="accordian-body collapse" id="demo1">
                <h1>Hi from the hiddenRow</h1>
            </div>
        </td>
    </tr>
</tbody></Table>

表显示正确，但行在单击时不会展开。

在react-bootstrap@0.24.5我使用Input属性defaultValue指定在组合框中选择的起始值

<Input type='select'
             ref='templateSelect'
             defaultValue={this.state.templateId}
             onChange={this.handleTemplateChange}>
   {options}
</Input>

应该如何处理这个react-bootstrap@0.30.7(最新的)Input不推荐使用的地方,这里应该使用的新组件FormControl不提供这样的属性？

应该value用呢？

<FormControl type='select'
             ref='templateSelect'
             value={this.state.templateId}
             onChange={this.handleTemplateChange}>
   {options}
</FormControl>

或者类似这样的事情:

value={this.state.templateId || 'default value'}

我正在尝试学习 MEAN，并且正在尝试制作一个简单的 Pokemon 查找器。

问题是我在处理附加到组件的事件时遇到了麻烦。

这是主要视图：

import React, { Component, PropTypes } from 'react';
import { connect } from 'react-redux';
import { bindActionCreators } from 'redux';

/* Import Components */
import Search from './components/Search/Search';
import { Grid, Row, Col } from 'react-bootstrap';

/* Import Actions */
import { fetchByName } from './PokedexActions';

// Import Style
//import styles from './Pokedex.css';

class Pokedex extends Component {

  handleFind= (name) =>{
    this.props.dispatch(fetchByName({name}));
  };

  render() {
    return (
      <Grid>
        <Row>
          <Col md={4}>
            <Search findPokemon={this.handleFind}/>
          </Col> …

每当为我加载导航栏时,我都会收到此警告.我不知道该怎么做或它意味着什么 - 我试过添加一个没有运气的父div.generateChildId根据其文档的属性仅将函数作为输入.超级混乱.

完全警告:

Warning: In the context of a `<TabContainer>`, `<NavItem>`s are given generated `id` and `aria-controls` attributes for the sake of proper component accessibility. Any provided ones will be ignored. To control these attributes directly, provide a `generateChildId` prop to the parent `<TabContainer>`.

为此,导航栏+标签完全按预期工作.它只是在控制台中不断抛出此警告.

从这里使用的示例,示例代码:

  <Tab.Container id="tabs-with-dropdown" defaultActiveKey="first">
    <Row className="clearfix">
      <Col sm={12}>
        <Nav bsStyle="tabs">
          <NavItem eventKey="first">
            Tab 1
          </NavItem>
          <NavItem eventKey="second">
            Tab 2
          </NavItem>
          <NavDropdown eventKey="3" title="Dropdown" id="nav-dropdown-within-tab">
            <MenuItem eventKey="3.1">Action</MenuItem>
            <MenuItem eventKey="3.2">Another action</MenuItem>
            <MenuItem eventKey="3.3">Something …

在我的react项目中,使用react-bootstrap,它会为网格大小加载所有css,除了xs集合.

xs但是,该集确实应用于所有网格大小的默认样式,但不包括媒体查询.

有什么明显的东西我不见了吗？

Bootstrap 4

我正在使用react-bootstrap库使用Navbar导入在我的页面顶部构建一个导航栏.但是,条形图似乎在底部有一些填充,我不想要,似乎无法移除,如此处所示(黄色在底部.此外,导航栏组件似乎没有跨越整个页面[由白色空间看到]在酒吧的两边];不知道为什么会这样):

我希望条形图跨越页面并且底部没有填充.

我的渲染方法如下:

  render() {
    if(Auth.isUserAuthenticated() && this.props.location.pathname === '/') {
      return <div/>;
    }
    return (
      <span className="nav-bar">
        <Navbar inverse className="fixed-top collapseOnSelect nav-bar">
          <Navbar.Collapse>
            <Navbar.Header className="locl-link">
              <Navbar.Brand>
                <LinkContainer to="/">
                  <a>locl</a>
                </LinkContainer>
              </Navbar.Brand>
              <Navbar.Toggle />
            </Navbar.Header>
            <BootstrapNav>
              <LinkContainer to="/about">
                <NavItem active={this.linkActive("about")}>About</NavItem>
              </LinkContainer>
            </BootstrapNav>
            <BootstrapNav pullRight>
              {this.logInOut()}
            </BootstrapNav>
          </Navbar.Collapse>
        </Navbar>
      </span>
    );
  }

任何帮助将不胜感激.

我有一个 QWERTY 键盘，通过组件动态呈现为通过 bootstrap-react 的 Bootstrap 按钮。他们没有 ID，我试图不在 React 中使用 ID 作为拐杖。

当单击其中一个字母时，它会通过 props 触发 onClick 事件，返回到我的 App.js。这很好用。我希望该按钮随后被禁用。因为它没有 ID，所以我无法执行 jQuery 类和数据值选择器，因为：React。

如何将该按钮属性更改为“禁用”（“禁用”是 React 中允许的 HTML 属性）。

import React from "react";
import {Button} from 'react-bootstrap';


const keyboard = props => {
return (
    <div>
        {props.keyboard.keys.map((item,index) => (
           <Button bsStyle={props.keyboard.style} bsSize="large" onClick={props.click} key={index} value={item.toUpperCase()}> {item.toUpperCase()}
            </Button>
        ))}
    </div>
)
}

export default keyboard;

到目前为止，我的点击事件正在按预期工作。理想情况下，我希望按钮更改为：

<Button bsStyle={props.keyboard.style} bsSize="large" onClick={props.click} key={index} value={item.toUpperCase()} disabled> {item.toUpperCase()}</Button>

点击事件之后。

键盘是从我的 App.js 引用的，如下所示：

            <Panel header="Keyboard:">
                <Keyboard keyboard={this.keyboard.row1} click={(event) => …

我需要提供名称属性才能在后端访问它。如何在react-bootstrap的Formcontrol标签中写入name属性。