标签: react-bootstrap

选择项目后如何使菜单折叠？

我不知道如何让它在小提琴上工作，但这就是我要做的？ https://jsfiddle.net/vjeux/kb3gN/

import React from 'react';
import {Navbar, Nav, NavItem, NavDropdown, DropdownButton, MenuItem, CollapsibleNav} from 'react-bootstrap';

export default class App extends React.Component {

    constructor(props) {
      super(props);
      this.onSelect = this.onSelect.bind(this);
      this.toggleNav = this.toggleNav.bind(this);
      // this.state = {navExpanded: false};
    }

    onSelect(e){
        console.log('OnSelect')
        // console.log(this.state.navExpanded);
        // this.setState({navExpanded: false});
    }

    toggleNav(){console.log('toggle...')};

    // <Navbar inverse fixedTop toggleNavKey={0} navExpanded={this.state.navExpanded} onToggle={() => this.toggleNav()}>
    // <Navbar inverse fixedTop toggleNavKey={0} navExpanded={this.state.navExpanded} >

    render() {
        return (

          <Navbar inverse fixedTop toggleNavKey={0} >
            <Nav right eventKey={0} onSelect={this.onSelect} > {/* This …

我有以下react-bootstrap组件:

        <FormGroup onSubmit={this.gotEmail} role="form">
          <FormControl type="text" className="form-control"/>
          <Button className="btn btn-primary btn-large centerButton" type="submit">Send</Button>
        </FormGroup>

我想点击"发送"按钮时提交表单.

但是,如果单击该按钮,则控件无法访问该this.gotEmail方法.

为什么会这样？

打字稿 2.3.4，反应 15.5.4 和反应引导 0.31.0。

我有一个FormControl，我想在用户按下回车键时做一些事情。

控制：

<FormControl
  name="keyword"
  type="text"
  value={this.state.keyword}
  onKeyPress={this.handleKeywordKeypress}
  onChange={(event: FormEvent<FormControlProps>) =>{
    this.setState({
      keyword: event.currentTarget.value as string
    });
  }}
/>

参数的定义应该handleKeywordKeypress是什么？

我可以这样定义：

handleKeywordKeypress= (e: any) =>{
  log.debug("keypress: " + e.nativeEvent.code);
};

这将被调用，它会打印kepress: Enter但类型应该是什么，e以便我可以将值与（什么？）进行比较以判断是否按下了 Enter 键。

我是“带钩子的反应引导”新手，我正在创建一个简单的表单。我正在遵循react-bootstrap文档的示例，并且遇到了选择/选项表单元素的问题。常规文本输入字段正常呈现，不会出现错误。select 语句似乎把事情搞砸了。

这是我的代码：

import { Form, Button } from "react-bootstrap";

export default function FormComponentName(props) {
    return (
        <>
            <h1>Search Form</h1>

            <Form>

                <Form.Group className="mb-3" controlId="searchState">
                    <Form.Label>State</Form.Label>
                    <Form.Select defaultValue="State...">
                        <option>State...</option>
                        <option value="1">One</option>
                        <option value="2">Two</option>
                        <option value="3">Three</option>
                    </Form.Select>
                </Form.Group>
               <Button variant="primary" type="submit">
                    Search Data
                </Button>

            </Form>


        </>
    )

}

这是纱线错误消息：

Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, …

我使用的阵营,引导下拉与输入一个内部的菜单项(否则控制台骂我遗漏的类型错误:无法读取的未定义的属性"专注")

好的,所以下拉渲染,输入在菜单项内(一切都很好),除非我在输入内部单击,下拉菜单关闭.

这是我的JSX

<Bootstrap.DropdownButton title={this.state.callIdTitle} id="callId">
  <Bootstrap.MenuItem eventKey='1'>
   <input ref="callIdInput" type='text' eventKey='2' placeholder='Enter Call ID' />
  </Bootstrap.MenuItem>
</Bootstrap.DropdownButton>

任何指向正确方向的人都非常感激,我一直在努力解决这个问题.

谢谢.

我有以下使用React-Bootstrap的JSX:

<Button bsStyle="danger pull-right" bsSize="small" onClick={() => {alert('do stuff')}}>
    <Glyphicon glyph="trash" />
</Button>

但是,这将在控制台中显示警告:

Warning: Failed prop type: Invalid prop `bsStyle` of value `danger pull-right` supplied to `Button`, expected one of ["success","warning","danger","info","default","primary","link"].

添加pull-right到样式列表的最佳方法是什么？

上面的代码确实有效,但我不希望在我的控制台中有任何警告.

是否可以更改background-color我的按钮onClick功能？

恩.点击background-color: black,再点击一下background-color: white

我尝试过类似的东西this.style,没有结果.

我设法让覆盖工作并在其中插入所需的数据.但没有找到任何可以帮助我的帖子.我正在使用react-bootstrap.这是我的代码.

  const metaDataOverlay = (
  <div>
  <style type="text/css">{`
  .btn-overlay {
    background-color: white;
    margin-right: -15px;
    margin-left: -15px;
    padding-bottom: -20px;
    padding: 0;
  }
  `}</style>

      <ButtonToolbar>
        <ButtonGroup>
        <OverlayTrigger trigger={['hover', 'focus']} placement="left" overlay={popoverHoverFocus}>
          <Button bsStyle="overlay" onClick={ clicked } onKeyPress={ keypress }>
            <div className={bemBlocks.item().mix(bemBlocks.container("item"))} data-qa="hit">
              <a href={url} onClick={(e)=>{e.preventDefault(); console.log("123")}}>
                <div>
                  <img data-qa="poster" className={bemBlocks.item("poster")} src={result._source.poster} width="240" height="240"/>
                </div>
              </a>
            </div>
          </Button>
        </OverlayTrigger>
        </ButtonGroup>
      </ButtonToolbar>

    </div>
  )

自从我开始编写 HTML 以来，我在 CSS 和 Bootstrap 方面的经验，当涉及到在屏幕上定位和调整元素大小时，一直非常糟糕。我想要做的（在我的 React 项目中）是在屏幕上并排放置 2 个元素，左边的元素需要是屏幕宽度的 80%，右边的元素必须是屏幕宽度的 20%屏幕宽度。显然，引导程序能够做到这一点，需要 4 周的时间编写代码、20 多个堆栈溢出问题和 1 个人牺牲。

下面是一个主要的应用程序组件<React.Fragment/>标签和<Container/>使用<Row/>以及<Col/>内部的：

import React, { Component } from "react";
import { Container, Row, Col } from "react-bootstrap";

class App extends Component {
  state = {};
  render() {
    return (
      <React.Fragment>
        <Container>
          <Row>
            <Col>Hello</Col>
            <Col>Hello2</Col>
          </Row>
        </Container>
      </React.Fragment>
    );
  }
}

export default MainContent;

预期结果？Hello将在屏幕的左侧，Hello2将在屏幕中间的右侧。正如这里的文档所建议的那样。

但当然这不会发生。该行在屏幕中间居中，总宽度约为屏幕尺寸的一半。

为了显示： 25% Whitespace | …

有谁知道你是否可以react-bootstrap与 Next.js 一起使用？我正在使用两者的最新版本，此时我可以提供代码，但现在我的应用程序没有抛出任何错误，它只是没有注册我的任何react-bootstrap组件。也许有一些我无法在互联网上找到的技巧？如果有帮助，我可以提供代码或文件结构。提前致谢！

下一个.config.js

const withCSS = require('@zeit/next-css')

module.exports = withCSS({
    /* my next config */
})

页面/index.js

import Badge from 'react-bootstrap/Badge';
import "../public/css/bootstrap.css";
const Index = () => (
    <div>
        <p className='display-4'>Hello</p>
        <Badge>Heading</Badge>
    </div>
)

export default Index;

包.json

{
  "name": "vacation-app",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "dev": "next",
    "build": "next build",
    "start": "next start"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "@zeit/next-css": "^1.0.1",
    "next": "^9.1.1",
    "react": "^16.10.2",
    "react-bootstrap": "^1.0.0-beta.14", …

我有一个包含OverlayTriggera Popover包含一些表单输入和一个Button保存数据并关闭.

save(e) {
  this.setState({ editing: false })
  this.props.handleUpdate(e);
}

render() {
    return (
      <OverlayTrigger trigger="click"
        rootClose={true}
        onExit={this.save.bind(this) }
        show={this.state.editing}
        overlay={
            <Popover title="Time Entry">
              <FormGroup>
                    <ControlLabel>Data: </ControlLabel>
                    <FormControl type={'number'}/>
              </FormGroup>
              <Button onClick={this.save.bind(this) }>Save</Button>
           </Popover>
        }>

我有rootClose = true,我的回调被执行onExit,但我没有看到手动关闭叠加的方法.我正在尝试使用showBootstrap Modal中的属性(可预测)不起作用.