标签: react-bootstrap

我目前正在使用React Bootstrap将 Bootstrap React 组件添加到我的应用程序中。

当用户单击该按钮时，会出现一个弹出窗口，允许用户将项目添加到列表中。它看起来像下面这样：

当用户在输入框中键入内容并按“添加”时，它会向该按钮所在的 div 添加一行。但是，由于弹出框添加到了最末尾<body>，因此弹出框不会随着行数而移动增加。它看起来像下面这样：

适用的代码如下所示：

<OverlayTrigger trigger="click" placement="top" overlay={this.generatePopover()}>
  <Button bsSize="lg"> Add Income Source</Button>
</OverlayTrigger>

在哪里this.generatePopover()使用该<Popover>组件。

我正在使用此站点的react-bootstrap：http://react-bootstrap.github.io/components.html

我想知道如何自定义这样的选项卡（在选项卡部分）：

const tabsInstance = (
  <Tabs defaultActiveKey={2}>
    <Tab eventKey={1} title="Tab 1">Tab 1 content</Tab>
    <Tab eventKey={2} title="Tab 2">Tab 2 content</Tab>
    <Tab eventKey={3} title="Tab 3" disabled>Tab 3 content</Tab>
  </Tabs>
);

ReactDOM.render(tabsInstance, mountNode);

我想添加一个十字按钮来关闭它，但我没有找到如何做到这一点。你能帮我吗 ？

我最近从在 React 类中使用 twitter-bootstrap 迁移到使用 React-bootstrap。我想测试一下react-bootstrap Navbar。我的代码如下：

import React from 'react';
import { Link } from 'react-router';
import Radium from 'radium';
import Grid from 'bootstrap-grid-react';
import * as bootstrap from "react-bootstrap";


export default class Layout extends React.Component {

    constructor() {
        super();
        this.state = {};
    }

    render() {
        let {Nav, Navbar, NavItem, NavDropdown, MenuItem} = bootstrap;
        return (
            <div>
                <Navbar>
                    <Navbar.Header>
                      <Navbar.Brand>
                        <a href="#">APITest</a>
                      </Navbar.Brand>
                    </Navbar.Header>
                    <Nav>
                      <NavItem eventKey={1} href="#">New user
                      </NavItem>
                      <NavItem eventKey={2} href="#">Create New User</NavItem>
                      <NavDropdown eventKey={3} title="Dropdown" id="basic-nav-dropdown"> …

我想弄清楚如何将样式应用于反应引导导航栏。在这里添加了jsfiddle。https://jsfiddle.net/pdqzju1e/1/ 使用react-bootstrap运行jsfiddle时遇到一些问题。适用于我本地设置的环境。

const navbar = {backgroundColor: '#F16E10'};
export default class NavigationBar extends React.Component {
  render() {
    return (
      <div>
        <Navbar style={navbar}>
          <Navbar.Header>
            <Navbar.Brand>
              <a href="/">Test App</a>
            </Navbar.Brand>
            <Navbar.Toggle />
          </Navbar.Header>
          <Navbar.Collapse>
            <Nav style={navbar}>
              <NavItem eventKey={1} href="#">Link1</NavItem>
              <NavItem eventKey={2} href="#">Link2</NavItem>
            </Nav>
            <Nav pullRight>
              <NavItem eventKey={1} href="#">Link3</NavItem>
            </Nav>
          </Navbar.Collapse>
        </Navbar>
      </div>
    );
  }
}

上面的内容似乎仅适用于导航组件，不适用于导航栏。有什么解决方法吗？

我想做的是将路由设置到我的对象。例如：

我设置路由为：

http://localhost:3000/projects

它显示我所有的项目列表（它工作得很好）

然后我想选择项目并查看详细信息，但它无法正常工作：

http://localhost:3000/projects/3

看起来如何：

当我单击“to”Details按钮时，它会将我发送到/projects:id，但出现错误，其中的项目project未定义。

我的代码。我将所有路由存储在主App.js文件中：

class App extends Component {
  render() {
    return (
      <div>
        <BrowserRouter>
          <div>
            <Route exact path="/projects" component={ProjectsList} />
            <Route exact path="/projects/:id" component={ProjectDetails} />
          </div>
        </BrowserRouter>
      </div>
    );
  }
}

export default App;

我有ProjectsList.js组件（如果需要，我将包含它的代码），ProjectsList.js我有列表组，Project.js如下所示：

class Project extends Component {
  render() {
    return (
      <ButtonToolbar>
        <ListGroupItem>{this.props.project.name</ListGroupItem>
        <Link to={`/projects/${this.props.project.id}`}>
          <Button>Details</Button>
        </Link>
      </ButtonToolbar>
    );
  }
}
export default Project;

通过Link to …

我只需要 React 应用程序中 Bootstrap 中的网格系统，因为 Bootstrap 中的默认样式会破坏我的风格。我怎样才能只使用网格系统？

我有一个带有 webpack 的新 React 项目，并尝试向其中添加“react-bootstrap”并呈现警报作为测试。

所以我做了：

npm install react-bootstrap --save

并已验证文件是否存在。在我的主 tsx 文件中，我有：

import { Alert } from 'react-bootstrap';
...
<Alert variant='success'>Success Alert</Alert>

当我运行 npm start 来启动我的服务器时，它会渲染页面并显示成功警报，效果非常好，但 webpack 错误提示如下：

[tsl] ERROR in ....\src\client-react\components\Header.tsx(9,23)
      TS2307: Cannot find module 'react-bootstrap'.

即使警报在下面正确显示（并且如果我破解 css 以使错误提示上显示：没有，它在下面看起来绝对没问题？

我认为这是因为react-bootstrap包中没有任何@types（@types/react-bootstrap适用于旧版本，因为他们显然已将类型滚动到主包中）但我不确定如何修复。

谢谢！

我是反应和引导程序的初学者。我想知道 - 如何设计 Form.Check （复选框）的样式，以便可以用更好的样式覆盖默认的外观和感觉。（比如开关或任何其他外观和感觉）。

这是我尝试过的（我使用了 css 样式，但它没有按预期工作）：

MyForm.js

import React from 'react';
import { Row, Form, Col, Button, Container } from 'react-bootstrap';

class MyCustomClass extends React.Component {
  constructor(props) {
    super(props);

    render()
    {
      return (
        <div>
          <br />
          <h3>Page Title</h3>
          <Form>
            <Form.Group >
              <Form.Check
                type="Checkbox"
                label="Click me"              
              />
            </Form.Group>
          </Form>
        </div>
      )
    }
  }
}

MyForm.css

.form-inline {
    width: 100%;
  }

  .form-group {
    width: 90%;
  }

  .input-group {
    width: 90% !important;
  }

  .form-control {
    width: 67% !important;
  }

  //This …

我的问题是 justify-content: space- Between 似乎在我的代码中不起作用。

import React from 'react';
import {Button, Navbar, Nav, NavDropdown} from 'react-bootstrap';
import '../styles/headerStyle.scss';
const Header = () => (
  <React.Fragment>
    <Navbar collapseOnSelect expand='lg' bg='dark' variant='dark'>
      <Navbar.Brand href='#home'>React-Bootstrap</Navbar.Brand>
      <Navbar.Toggle aria-controls='responsive-navbar-nav' />
      <Navbar.Collapse id='responsive-navbar-nav'>
        <Nav>
          <div className='container'>
            <Nav.Link>Features</Nav.Link>
            <Nav.Link>Pricing</Nav.Link>
            <NavDropdown title='Dropdown' id='collasible-nav-dropdown'>
              <NavDropdown.Item href='#action/3.1'>Action</NavDropdown.Item>
              <NavDropdown.Item href='#action/3.2'>
                Another action
              </NavDropdown.Item>
              <NavDropdown.Item href='#action/3.3'>Something</NavDropdown.Item>
              <NavDropdown.Divider />
              <NavDropdown.Item href='#action/3.4'>
                Separated link
              </NavDropdown.Item>
            </NavDropdown>
            <Nav.Link>More deets</Nav.Link>
            <Nav.Link eventKey={2} href='#memes'>
              Dank memes
            </Nav.Link>
          </div>
        </Nav>
      </Navbar.Collapse>
    </Navbar>
  </React.Fragment>
);
export default Header;

这是样式表： …

我正在使用react-bootstrap，并且在我的react网页中实现了一个下拉菜单。handleClick在我的下拉菜单中，当选择按钮时我将调用一个函数。

<Dropdown.Menu>\n    <Dropdown.Item name = "baudratestate1200" onSelect={this.handleClick}>1200</Dropdown.Item>\n    <Dropdown.Item name = "baudratestate2400" onSelect={this.handleClick}>2400</Dropdown.Item>\n    <Dropdown.Item name = "baudratestate4800" onSelect={this.handleClick}>4800</Dropdown.Item>\n    <Dropdown.Item name = "baudratestate9600" onSelect={this.handleClick}>9600</Dropdown.Item>\n</Dropdown.Menu>\n

这是我的handleClick功能：

handleClick = (eventkey, event) => {\n  console.log(eventkey)\n  console.log(event)\n}\n

然而，它event.target是空的，下面附上的是console.log我的客户端浏览器的：

Class {dispatchConfig: {\xe2\x80\xa6}, _targetInst: FiberNode, _dispatchInstances: FiberNode, nativeEvent: MouseEvent, _dispatchListeners: \xc6\x92, \xe2\x80\xa6}\nnativeEvent: (...)\ntype: (...)\ntarget: null\n

我尝试过绑定和不绑定构造函数中的函数，但两者都为 event.target 生成了空值

Class {dispatchConfig: {\xe2\x80\xa6}, _targetInst: FiberNode, _dispatchInstances: FiberNode, nativeEvent: MouseEvent, _dispatchListeners: \xc6\x92, \xe2\x80\xa6}\nnativeEvent: (...)\ntype: …