标签: react-bootstrap

我想出了如何使用react-bootstrap来显示下拉列表:

<DropdownButton bsStyle="success" title="Choose" onSelect={this.handleSelect} >
    <MenuItem key="1">Action</MenuItem>
    <MenuItem key="2">Another action</MenuItem>
    <MenuItem key="3">Something else here</MenuItem>
</DropdownButton>

但是我怎么想为onSelect编写处理程序以捕获被选中的选项？我试过这个,但不知道在里面写些什么:

handleSelect: function () {
    // what am I suppose to write in there to get the value?
},

此外,有没有办法设置默认选择的选项？

谢谢!

我遇到了一个我想要控制的文本输入问题,但它需要支持一个空值.这是我的组件:

import React, { Component, PropTypes } from 'react';
import { ControlLabel, FormControl, FormGroup } from 'react-bootstrap';

const propTypes = {
  id: PropTypes.string.isRequired,
  label: PropTypes.string,
  onChange: PropTypes.func,
  upperCaseOnly: PropTypes.bool,
  value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
};

export default class UppercaseTextField extends Component {
  constructor(props) {
    super();
    this.state = { value: props.value };
    this.onChange = () => this.onChange();
  }

  onChange(e) {
    let value = e.target.value;
    if (this.props.upperCaseOnly) {
      value = value.toUpperCase();
    }
    this.setState({ value });
    this.props.onChange(e);
  }

  render() {
    return (
      <FormGroup controlId={id}>
        <ControlLabel>{this.props.label}</ControlLabel> …

我开始使用构建我的UI react-bootstrap,现在有一个重要的任务是使用标准bootstrap组件创建SideBar Accordion Menu .我找到了这个使用panel-group和的例子table,但我认为这不是最好的方法,因为nav导航组件的自然方式更好.

我希望我的SideBar菜单代码看起来像这样(react-bootstrap组件):

<Nav bsStyle="pills" stacked>
    <NavItem title="Item 1">
        <Nav bsStyle="pills" stacked>
            <NavItem title="Sub Item 1">Sub Item 1</NavItem>
            <NavItem title="Sub Item 2">Sub Item 2</NavItem>
            <NavItem title="Sub Item 3">Sub Item 3</NavItem>
        </Nav>
    </NavItem>
    <NavItem title="Item 2">Item 2</NavItem>
    <NavItem title="Item 3">Item 3</NavItem>
</Nav>

任何建议react-bootstrap或只是bootstrap有用.

我正在尝试使用 React-Bootstrap 作为道具应用边距和填充。

我通过了文档，但没有发现任何提及在那里添加填充或边距，因为它在官方引导程序文档（第 3和第 4 个）中。我知道它不能很好地支持 Bootstrap 4，所以尝试了两者。

我试图将 params 传递为p={1}，paddingxs={5}或者mt='1'但它无法识别其中任何一个。更多的尝试在 React-Bootstrap 文件夹中找到任何Spacing元素，但失败了。

填充和边距用作类名。但是我觉得没有 Bootstrap 类就一定有办法。一定有一种财产。

对于我与 React-Bootstrap 一起使用的所有组件，除了模态、警报等中内置的关闭按钮之外，所有样式都有效。示例如下。

警报组件 - 预期

我看到的警报组件

模态组件 - 预期

我看到的模态组件

我正在使用的构建在 React-Bootstrap 之上的 npm 包也发生了同样的事情，比如React-Bootstrap-Typeahead。

这些是我正在使用的依赖项：

"bootstrap": "^5.0.0-beta1",\n"popper.js": "^1.16.1",\n"react-bootstrap": "^1.4.0",\n"react-bootstrap-typeahead": "^5.1.4"\n

我在我的文件中导入 Bootstrap CSS index.js：

"bootstrap": "^5.0.0-beta1",\n"popper.js": "^1.16.1",\n"react-bootstrap": "^1.4.0",\n"react-bootstrap-typeahead": "^5.1.4"\n

\n

我像这样在我的文件中导入 React-Bootstrap，除了关闭按钮之外，一切都正常工作。

import { Modal, Button, Alert } from \'react-bootstrap\';\n

不过，我不会在任何地方导入 Popper.js 或 Bootstrap.js。有谁知道可能出了什么问题？

编辑

下面是在 HTML DOM 中呈现的按钮以及正在应用的样式。奇怪的是，按钮上的类没有应用任何样式.close（并且 中也没有应用任何样式bootstrap.min.css …

我正在开始学习 React 并尝试从 React-bootstrap 创建一个 Jumbotron 元素。我很确定我已经安装了所有正确的模块npm install react-bootstrap bootstrap，但我收到一个控制台错误，显示“尝试导入错误：'Jumbotron 未从'react-bootstrap'导出（导入为'Jumbo'）”。我的代码如下：

import React from 'react';
import { Jumbotron as Jumbo, Container } from 'react-bootstrap';
import styled from 'styled-components';
import boatImage from '../assets/boatImage.jpg';

const Styles = styled.div `
  .jumbo {
    background: url(${boatImage}) no-repeat fixed bottom;
    background-size: cover;
    color: #efefef;
    height: 200px;
    position: relative;
    z-index: -2;
  }
  .overlay {
    background-color: #000;
    opacity: 0.6;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    z-index: -1;
  }
`;

export const Jumbotron …

JSX:

var Button = require("react-bootstrap").Button;
var Input = require("react-bootstrap").Input;
var MyClass = React.createClass({
        onclick: function () {
           this.refs.email.getDOMNode().focus();
           console.log('DOM element', this.refs.email.getDOMNode());
        }
        render: function () {
          return (
             <div>
                <Button onClick={this.onlick}>Login</Button>
                <Input ref='email' type='email' />
             </div>
            );
        },
    });  

笔记:

1. 输入字段是一个react-bootstrap.Input类.
2. getDOMNode().focus()概念来自Facebook反应文档

当按钮onclick处理程序运行时,电子邮件输入字段应该获得焦点,但它不会发生.我发现react-bootstrap Input字段类正在渲染包装div中的真实DOM输入字段.这是console.log的输出:

<div class="form-group" data-reactid=".1awy8d4e9kw.1.3.$=1$3:0.0.0.1.0">
  <input class="form-control" type="email" data-reactid=".1awy8d4e9kw.1.3.$=1$3:0.0.0.1.0.1:$input">
</div>

所以看起来输入没有得到焦点,因为焦点应用于包装div,它拒绝它(我document.activeElement在控制台中使用来检查).

问题是,如何关注真实input元素？

注意:有点不相关但React尊重该autoFocus属性.在渲染后需要立即设置焦点时,这很有用.尽管如此,它还不能取代程序化的方式.

下面是我的Greeter.jsx文件:

import React, {Component} from 'react';
import cssModules from 'react-css-modules';
import {Button} from 'react-bootstrap';
import styles from './Greeter.css';

const option = {
  'allowMultiple': true
};

class Greeter extends Component{
  render() {
    return (
      <div styleName='root root-child'>
        <h1>Welcome to React Devops.</h1>

        <p styleName="para">This is an amazing para.</p>
        <p>Hot module reload.</p>

        <Button bsStyle="primary">Test</Button>
      </div>
    );
  }
}

export default cssModules(Greeter, styles, option);

下面是我的main.js文件:

import React from 'react';
import {render} from 'react-dom';
import Greeter from './Greeter';
import 'bootstrap/dist/css/bootstrap.min.css';
import 'bootstrap/dist/css/bootstrap-theme.min.css';

import './main.css';

render(<Greeter …

我正在使用react-bootstrap并尝试向NavBar添加一个图标

      <Navbar.Header>
        <Navbar.Brand>
          <a href="#">&#9776; React-Bootstrap
          <img src={logo} style={{width:100, marginTop: -7}} />
          </a>
        </Navbar.Brand>
        <Navbar.Toggle />
      </Navbar.Header>

但是,图标未在导航栏中正确定位

从官方网站,我找不到任何向导航栏添加图标的示例.

谢谢

我正在使用 React、Formik、react-bootstrap 和 yup 制作表单以进行验证。我正在尝试显示验证错误，但该touched属性未填充字段。

const schema = yup.object({
  name: yup.string().required(),
  email: yup
    .string()
    .email()
    .required(),
});

const ChildForm = props => {
  const { child: { name = '', email = '' } = {} } = props;
  const submitHandler = ({name, email}) => console.log(name, email);

  return (
    <Formik
      validationSchema={schema}
      onSubmit={submitHandler}
      initialValues={{ name, email }}
      render={({ handleSubmit, handleChange, values, touched, errors }) => 
      {
        console.log('touched: ', touched);
        return (
          <Form noValidate className="mt-4" onSubmit={handleSubmit}>
            <Form.Row>
              <Form.Group as={Col} controlId="name"> …