标签: react-bootstrap

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属性.在渲染后需要立即设置焦点时,这很有用.尽管如此,它还不能取代程序化的方式.

文档页面建议仅导入所需的组件。这里给出了 2 个示例https://react-bootstrap.netlify.com/getting-started/introduction#importing：

import Button from 'react-bootstrap/lib/Button';

// or less ideally
import { Button } from 'react-bootstrap';

是什么让第二种方法“不太理想”？

我正在使用 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"> …

我试图在自定义组件（按钮）悬停时显示弹出窗口：

class MyComponent extends React.PureComponent<MyComponentProperties>  {
    public render(): JSX.Element {
        const overlay: JSX.Element = (
            <Popover id={this.uuid}>
                <Popover.Content>
                    Hello world!
                </Popover.Content>
            </Popover>
        );

        return <OverlayTrigger trigger="hover" placement="auto" delay={{show : 700, hide : 0}} overlay={overlay}>
            <MyFancyButton ... />
        </OverlayTrigger >
    }
}

class MyFancyButton extends React.PureComponent<MyFancyButtonProperties> {
    public render(): JSX.Element {
        return <button ...>Hover me!</button>
    }
}

弹出窗口不显示。render但是，如果我将函数的返回更改MyComponent为：

return <OverlayTrigger trigger="hover" placement="auto" delay={{show : 700, hide : 0}} overlay={overlay}>
    <button>Hover me!</button>
</OverlayTrigger >

我检查了https://react-bootstrap.github.io/components/overlays/#overlay-trigger，它说：

请注意，触发组件 …

i\xc2\xb4m 尝试使用以下 css 删除下拉箭头，但 \xc2\xb4s 没有产生任何效果。

.dropdown::after{\n  display: none !important; \n}\n

这是代码

<NavDropdown className={classes.user} title="Componentes" id="collasible-nav-dropdown">\n   <NavDropdown.Item href="#action/3.1">Action</NavDropdown.Item>\n   <NavDropdown.Item href="#action/3.2">Another action</NavDropdown.Item>\n   <NavDropdown.Item href="#action/3.3">Something</NavDropdown.Item>\n   <NavDropdown.Divider />\n   <NavDropdown.Item href="#action/3.4">Separated link</NavDropdown.Item>\n</NavDropdown>\n

我按照React.js中的帖子 更新样式onScroll上的指令来注册滚动事件的事件监听器.

我有一个React组件,它从React-Bootstrap库中呈现一个Table组件https://react-bootstrap.github.io/

我想我正确地注册了事件监听器,但我不确定为什么当我向下滚动表时,我的handleScroll()回调没有被调用.是因为事件监听器没有在实际表本身上注册吗？

感谢您花时间阅读我的问题.任何反馈都表示赞赏.

这是我如何注册事件监听器的片段.

  handleScroll: function(event) {
    console.log('handleScroll invoked');
  },

  componentDidMount: function() {
    console.log('componentDidMount invoked');
    window.addEventListener('scroll', this.handleScroll);
  },

  componentWillUnmount: function() {
    console.log('componentWillUnmount invoked');
    window.removeEventListener('scroll', this.handleScroll);
  },

这是我的渲染功能的片段.

  render: function() {

    var tableRows = this.renderTableRow(this.props.sheet);

    return (
      <Table striped bordered condensed hover>
        <TableHeaderContainer
          tableTemplateName={this.props.tableTemplateName}
          sheetName={this.props.sheet.name}/>
        <tbody>
          {tableRows}
        </tbody>
      </Table>
    );
  }

我正在使用react-bootstrap-table(var ReactBsTable = require("react-bootstrap-table")).

我想在bootstraptable中添加一个只包含按钮的列.

不知道谢谢.

<BootstrapTable data={this.state.activities} pagination={true} hover={true} search={true} selectRow={selectRowProp} options={options}>
  <TableHeaderColumn isKey={true} dataField="id" hidden {true}>ID</TableHeaderColumn>
  <TableHeaderColumn dataField="title" dataSort={true}>Title</TableHeaderColumn>
  <TableHeaderColumn dataField="adress" dataSort{true}>Adress</TableHeaderColumn>
  ///I dont know if here or there is option to use
 </BootstrapTable>

我尝试添加一个按钮,显示与此按钮对应的id或行数据.我使用了jquery,但是我给了一个id按钮,但所有这些按钮都有相同的id,所以只有第一个工作,其余的没有.

<BootstrapTable data={this.state.activities} pagination={true} hover={true} search={true} selectRow={selectRowProp} options={options}>
  <TableHeaderColumn isKey={true} dataField="id" hidden {true}>ID</TableHeaderColumn>
  <TableHeaderColumn dataField="title" dataSort={true}>Title</TableHeaderColumn>
  <TableHeaderColumn dataField="adress" dataSort{true}>Adress</TableHeaderColumn>
  <TableHeaderColumn dataField="button" dataFormat={this.buttonFunction}></TableHeaderColumn>

 </BootstrapTable>

buttonFunction: function (cell, row) {
        var today = new Date().toISOString();
        if (row.status === "En cours") {
            if (row.dateEnd > …

我有一个Rails 5应用程序,我已经安装browserify和react-rails.我可以使用加载组件和安装包npm.加载某些外部软件包时的浏览器控制台即react-bootstrap组件填充了"警告:您正在为组件上的每个可用支柱手动调用......的React.PropTypes验证函数".

我到处寻找,但我不明白如何修复这些警告.这里也提出了类似的问题,但这似乎没有适用于我的问题的答案.

这是我的文件:

的package.json

{
  "name": "myapp",
  "version": "1.0.0",
  "dependencies": {
    "bootstrap": "^3.3.7",
    "browserify": "^13.1.0",
    "browserify-incremental": "^3.0.1",
    "fetch": "^1.1.0",
    "jquery": "^3.1.1",
    "jquery-ui": "^1.12.1",
    "jquery-ujs": "^1.2.2",
    "react": "^15.3.2",
    "react-bootstrap": "^0.30.4",
    "react-dom": "^15.3.2",
    "reactify": "^1.1.1",
    "sweetalert-react": "^0.4.4"
  }
}

的application.js

//= require_self
//= require react-server
//= require react_ujs


window.$ = window.jQuery = global.$ = require('jquery');
var React = window.React = global.React …

我使用了 react bootstrap 导航栏也用于react-scroll平滑导航。它工作正常，但在响应模式下单击任何导航项时导航栏不会折叠。

套餐

import React, { Component } from "react";
import { NavLink } from "react-router-dom";
import { Link } from "react-scroll";
import { LinkContainer } from "react-router-bootstrap";
import { Navbar, Container, NavDropdown, Nav, Dropdown } from "react-bootstrap";

导航栏

<Navbar
    sticky="top"
    id="navbar"
    bg="light"
    expand="lg"
    className="navbar navbar-expand-lg navbar-light bg-light"
    collapseOnSelect={true}
>
<Navbar.Toggle aria-controls="basic-navbar-nav" />
    <Navbar.Collapse id="basic-navbar-nav">
        <Nav className="ml-auto">
            <Link
                activeClass="active"
                to="features"
                spy={true}
                smooth={true}
                offset={-70}
                duration={800}
                className="nav-link"
                onClick={this.closeNavbar}
            >
                Features
            </Link>

            <Link
                activeClass="active"
                to="about"
                spy={true}
                smooth={true}
                offset={-70}
                duration={800} …

引导程序switches似乎不起作用。即使是文档版本也不起作用

<Form>
  <Form.Check 
    type="switch"
    id="custom-switch"
    label="Check this switch"
  />
  <Form.Check 
    disabled
    type="switch"
    label="disabled switch"
    id="disabled-custom-switch"
  />
</Form>