标签: react-bootstrap

我正在使用 HackerOne 的这个模块： https: //reactdatepicker.com

将模块安装并导入到我的项目后，我决定从站点中选择“选择时间”组件。

我的代码

import React, { Component } from "react";
import { Form, Button } from "react-bootstrap"
import DatePicker from "react-datepicker"

export default class AddEventModal extends Component {

    constructor(props) {
        super(props)

        this.state = {
            date: new Date()
        }
    }

    render() {
        return (
            <Form>
                <Form.Group controlId="formBasicEmail">
                    <Form.Label>Title <span style={{ color: "red" }}>*</span></Form.Label>
                    <Form.Control type="text" placeholder="Enter a Title" className="col-6" />
                    <Form.Text className="text-muted">
                        Enter a Title for your Event.
                        </Form.Text>
                </Form.Group>

                <Form.Group controlId="formBasicPassword">
                    <Form.Label>Description</Form.Label>
                    <Form.Control type="text" placeholder="Enter a …

我正在尝试使用react-bootstrap 在堆叠进度条的各个条上添加工具提示。使用 OverlayTrigger 可以吗？这是我开始的代码：

<ProgressBar>
    <ProgressBar variant='success' now={7} max={21}></ProgressBar>
    <ProgressBar variant='danger' now={7} max={21}></ProgressBar>
    <ProgressBar variant='secondary' now={7} max={21}></ProgressBar>
</ProgressBar>

我尝试在内部 ProgressBar 周围使用 OverlayTrigger，但在浏览器中呈现时，它们不会出现，因为每个 ProgressBar 都被视为较大进度条内的单独进度条。例如：

<div class="progress">
    <div class="progress">
        <div role="progressbar" class="progress-bar bg-success" aria-valuenow="33" aria-valuemin="0" aria-valuemax="100" style="width: 33%;"></div>
    </div>
    <div class="progress">
        <div role="progressbar" class="progress-bar bg-danger" aria-valuenow="33" aria-valuemin="0" aria-valuemax="100" style="width: 33%;"></div>
    </div>
    <div class="progress">
        <div role="progressbar" class="progress-bar bg-secondary" aria-valuenow="33" aria-valuemin="0" aria-valuemax="100" style="width: 33%;"></div>
    </div>
</div>

我可以通过对每个 ProgressBar 使用 Overlay，然后在每个 ProgressBar 上指定 onMouseEnter 和 onMouseLeave 来解决这个问题。还为每个 ProgressBar 创建 ref 和显示状态变量。这是唯一的方法吗？许多重复的代码将由 OverlayTrigger 处理。我不想使用 title …

我正在我的组织中开发基于 REACT 的网络应用程序 POC。有一个问题表，对于每个问题，我必须在表中提供一个按钮，当用户单击该按钮时，它将打开一个模式，通过 API 调用获取该问题的数据，然后将数据广播到那个模态。

问题：假设我在该表中列出了 300 个问题，因此有 300 个可单击按钮用于打开模式和调用 API。现在的问题是，每当该表加载时，它都会立即调用所有 300 个问题的 API，但我希望每个 API 仅在用户单击相应按钮时调用！

这是迄今为止我管理的模态组件的代码：

import React, { FunctionComponent, useState, useEffect } from 'react'; // importing FunctionComponent
import { Modal, Button } from 'react-bootstrap';

type IssueReportProps = {
    issueInfo: any
}

const IssueReport: FunctionComponent<IssueReportProps> = ({ issueInfo }) => {
    const issueNumber: string = issueInfo.number;
    const [show, setShow] = useState(false);
    const [diagnosisInfo, setdiagnosisInfo] = useState({});
    const handleClose = () => setShow(false);
    const handleShow = () …

我刚刚开始一个新的react应用程序，想要实现react-bootstrap（通过运行npm install react-bootstrap bootstrap来实现）Column、Row和Button标签不起作用，并且react-bootstrap文件夹存在于node-modules文件夹中。

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

class App extends React.Component {

  constructor(props) {
    super(props)
  }

  render() {
    return(
      <Container fluid>
        <Row>
          <Col>
          hi
          </Col>
          <Col>
          bye
          </Col>
        </Row>
        <Button variant='primary'>hi</Button>
      </Container>
    )
  }
}
export default App;

我有以下复选框代码：

<Form.Group  controlId="formBasicCheckbox">
       <Form.Check
             onChange={(disabled)=> {disabled ? packed = 'yes' : packed = 'no'}} >
       </Form.Check>
</Form.Group>

我还需要为其设置默认值，但找不到方法来做到这一点。我尝试了“value”、“defaultValue”，但没有任何帮助，谷歌也没有。

我正在按照指南升级到 React 18。完成升级后，我在应用程序的某些页面上看到错误。

ReactDOM.unstable_renderSubtreeIntoContainer() is no longer supported in React 18.

我没有unstable_renderSubtreeIntoContainer()在应用程序中的任何地方使用该函数，但是当我仔细观察导致这些错误的原因时，它似乎是由我的 Bootstrap 组件引起的。

有没有办法更新它以消除错误？

我正在使用react.js和bootstrap构建一个应用程序以进行反应.我正在尝试创建一个类"成功"的表行.但是,在反应中将属性"class"传递给tr标签不起作用,在翻译的HTML中没有任何属性.

var Hello = React.createClass({
  render: function() {
    return <ReactBootstrap.Table bordered striped hover>
        <thead><tr><th>name</th></tr></thead>
        <tbody><tr class="success"><td>Jonas</td></tr></tbody>
    </ReactBootstrap.Table>
  }
});

相关JSFiddle - http://jsfiddle.net/7pqrwfch/

我使用react-bootstrap 中的示例在我的页面中添加了一个拆分按钮下拉列表以对其进行测试。

我的代码..

<SplitButton bsStyle={"primary"} title={"test"} key={1} id={`this-is-a-test`}>
    <MenuItem eventKey="1">Action</MenuItem>
    <MenuItem eventKey="2">Another action</MenuItem>
    <MenuItem eventKey="3">Something else here</MenuItem>
    <MenuItem divider />
    <MenuItem eventKey="4">Separated link</MenuItem>
</SplitButton>

单击拆分按钮下拉菜单时，控制台显示

未捕获的类型错误：无法读取未定义的属性“findDOMNode”

错误指向 react-bootstrap.js 文件中的代码。

exports.default = function (componentOrElement) {
    return (0, _ownerDocument2.default)(_reactDom2.default.findDOMNode(componentOrElement));
};

我看过其他建议升级 React 和 React-dom 的答案，但我认为我的版本没问题（都是 15.3.0）。

编辑：

它在我创建的导入相同文件的codepen 中工作。问题必须与我的实现有关..

在我的反应应用程序中，我有用于登录和退出的按钮。注销没什么大不了的，因为它从来没有被激活过。当使用 LinkContainer（这很棒）时，它会添加一个活动类，active指示何时选择该路由。这对除buttons. 当它将`active 类添加到我的按钮时，它会在按钮后面添加一个填充的背景颜色。我不想要那个。现在是代码和图片：

这是代码：

import { Glyphicon, Nav, NavItem, Button } from 'react-bootstrap';
import { LinkContainer } from 'react-router-bootstrap';

<Nav>
    <LinkContainer to={'/'} exact>
        <NavItem>
            <Glyphicon glyph='home' /> Home
        </NavItem>
    </LinkContainer>
    <LinkContainer to={'/documents'}>
        <NavItem>
            <Glyphicon glyph='education' /> User Documents
        </NavItem>
    </LinkContainer>
    <LinkContainer to={'/login'}>
        <NavItem>
            <Button bsStyle="primary" block>
                <span className='glyphicon glyphicon-log-in'></span>Login
            </Button>
        </NavItem>
    </LinkContainer>
</Nav>

我希望它在我的按钮以外的所有东西上设置那个活动类。

使用react-bootstrap和react-router-bootstrap

我目前正在尝试学习React和React-Bootstrap。

我试图充分利用React-Bootstrap网格布局。我不确定是否执行不正确。我的直觉说我在某个地方使用了不合适的版本，因为据我所知，“容器，列，行”功能根本不起作用。

可能是什么问题？我没主意了。

package.json中的版本：

  "dependencies": {
    "bootstrap": "^4.3.1",
    "jquery": "^3.0.0",
    "react": "^16.8.4",
    "react-bootstrap": "^1.0.0-beta.6",
    "react-dom": "^16.8.4",
    "react-scripts": "2.1.8",
    "typescript": "^3.3.4000"

来自“ bootstrap”目录的package.json：

  "_from": "bootstrap@latest",
  "_id": "bootstrap@4.3.1",

来自“ react-bootstrap”目录的package.json：

  "_from": "react-bootstrap@^1.0.0-beta.6",
  "_id": "react-bootstrap@1.0.0-beta.6",

请注意，我也尝试过安装和使用bootstrap@3时没有运气：

npm install bootstrap@3 --save npm i --save bootstrap@3

index.js的主要代码段：

import React from 'react';
import ReactDOM from 'react-dom';
import Container from 'react-bootstrap/Container';
import Row from 'react-bootstrap/Row';
import Col from 'react-bootstrap/Col';

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

  clickHandler = (command) =>
  {
    // ... …