标签: react-bootstrap

我有一个对象数组，我想在 6 行 3 列网格中显示它们。我正在使用以下代码。

 const GridLayout = (props) => {
        let layout = [];
        let total_articles = props.articles.length;
        let nRows = total_articles / 3;
        let nCols = 3;

        for (let i = 0; i < nRows; i++) {
            layout.push(<div className="row">);
            for (let j = 0; j < nCols && (i * nCols) + j < total_articles; j++) {
                    layout.push(
                    <div key={(i * nCols) + j} className="col-md-4 column">
                        <ArticleCard articleDetails={props.articles[(i * nCols) + j]}/>
                    </div>)
            }
                layout.push(</div>);
        }
        return ( …

当我使用 React-Bootstrap 单击 NavItem 时，我试图调用单击事件处理程序。

我有以下代码：

<Navbar fluid inverse>
            <Navbar.Header>
                <Navbar.Brand>
                    {first} {last}
                </Navbar.Brand>
                <Navbar.Toggle/>
            </Navbar.Header>
            <Navbar.Collapse>
            <Nav>
                {navItems.map(item => {
                    return(
                        <NavItem                           
                        key={item[1]}
                        eventKey={item[1]}
                        onClick={()=> this.handleClick}
                        >
                            {item[0]}
                        </NavItem>
                    );
                })}                  
            </Nav>
            </Navbar.Collapse>
        </Navbar>

以此作为我的点击处理程序：

handleClick(event) {
    event.preventDefault();
    console.log(event);
}

愚蠢的是，这不起作用，但是，当我让 onClick 等于时：

<NavItem                           
  key={item[1]}
  eventKey={item[1]}
  onClick={()=> console.log("Hello")}
  >
  {item[0]}
 </NavItem>

它工作正常，只有当我添加点击处理程序时......有什么想法吗？

我在我的应用程序中使用了“react-bootstrap”。我使用了Tab Component。我想要选项卡组件的 onSelect 功能。

下面是我的组件代码

export default class Users extends Component {
  handleSelect() {
    console.log("Tab selected")    
  } 

  render() {
    return(
      <div className="welcome-wrap">
        <br />
        <div className="row">
          <h3>Users</h3>
          <Tabs defaultActiveKey={1} animation={false} id="user-role-tab">
            <Tab eventKey={1} title="Root Users" className="
            " onSelect={this.handleSelect()}>
              <RootUser/>
            </Tab>
            <Tab eventKey={2} title="Organization Users" onSelect={this.handleSelect()}>
              <OrganizationUser/>
            </Tab>
            <Tab eventKey={3} title="Business Users" onSelect={this.handleSelect()}>
              <BusinessUser/>
            </Tab>
          </Tabs>
        </div>
      </div>
    )
  }
}

它在加载组件时工作，但是当我单击任何选项卡时，不会调用该函数。我检查了如何在 react-bootstrap 中更改的选项卡上调用事件的解决方案，但它也不起作用。

我正在使用 react boostrap 模态并尝试将其均匀地居中放置，目前我正在指定width模态的 ，然后在似乎有效的modal-dialog类上设置 margin-left 285px !important。但是当屏幕尺寸低于xl尺寸时，我该如何做到这一点，边距应该是100px.

这是codepen的链接。

我的 CSS 看起来像这样：-

 .modal-content {
   width: 1200px  
   }
 .modal-dialog {
   margin-left: 285px !important  
   }
  @media screen and (max-width: 1000px) {
 .modal-dialog {
    margin-left: 100px !important
  }
}

显然，媒体查询似乎不起作用。或者有没有办法将模态设置为始终居中，而不管屏幕尺寸如何？

我遇到过 Collapse 在用于包装类组件时似乎无法正常工作的情况，尽管它在包装简单的 JSX 元素时似乎可以正常工作。

您可以在此示例中看到这一点：https : //codesandbox.io/embed/flamboyant-dhawan-4rf4b?fontsize=14&hidenavigation=1&theme=dark

请注意，在使用 Collapse 的两种情况下，它都使用 初始化in={false}，但是这在包装定义列表时有效，但在包装提供定义列表的自定义组件时不起作用。

我误解了应该如何使用 Collapse 吗？或者任何人都可以提出一个解决方案来让 Collapse 在包装类组件时按预期工作？

为方便起见，这是上面链接的相同代码：

import React from "react";

import Collapse from "react-bootstrap/Collapse";
import Container from "react-bootstrap/Container";

import "./App.css";

class BasicList extends React.Component {
  render() {
    return (
      <dl id={this.props.id} className="row">
        <dt className="col-md-3">Name</dt>
        <dd className="col-md-9">{this.props.name}</dd>

        <dt className="col-md-3">Address</dt>
        <dd className="col-md-9">{this.props.address}</dd>

        <dt className="col-md-3">Favorite Color</dt>
        <dd className="col-md-9">{this.props.color}</dd>
      </dl>
    );
  }
}

const App = () => (
  <Container className="p-3">
    <h1 className="header">Collapse Example</h1>

    <p>
      <em>Ex 1: BasicList component …

因此，我使用react-router-bootstrap 中的LinkContainer 组件来包装bootstrap 中的Nav.Link 组件。请参考下图以供参考。

// Snippet
import {LinkContainer} from "react-router-bootstrap";

// Snippet

              <LinkContainer to="/cart">
                <Nav.Link class="navlink">
                  <FaShoppingCart /> Cart
                </Nav.Link>
              </LinkContainer>

// Snippet

但我的代码出现此错误：[错误照片][1] [1]：https://i.stack.imgur.com/AF41y.png

顺便说一句，我正在使用 React v.17.0.2 和 React-Router-Bootstrap v.0.25.0

我想问是否有人可以提供帮助，或者我应该更改我的react-router-bootstrap 版本，甚至使用react-router-component 来代替。

先感谢您。

我使用 create-react-app 开始我的 React 应用程序，然后使用 npm 安装了 React-bootstrap，然后在我的 index.js 中使用import 'bootstrap/dist/css/bootstrap.min.css'; 。保存后出现这个警告：

怎么了 ？

我想根据所附图像在react-bootstrap复选框标签内显示链接如何格式化侧面标签中的标签？请帮忙。

<Form.Check
    className="checkbox-groove"
    label="I agree to the {<a>terms and conditions</a>}"
    name="group1"         
  />

https://codesandbox.io/s/display-link-inside-a-input-label-0vosse

import { Form } from 'react-bootstrap'

const nameArray = [
    {
        "id": 52655,
        "firstName": "raj",
        "lastName": "",
        "primaryAddress": "sad"
    },
    {
        "id": 52656,
        "firstName": "SubbaRaju",
        "lastName": "ch",
        "primaryAddress": "kphb"
    },
    {
        "id": 52667,
        "firstName": "Ravi",
        "lastName": "Varma",
        "primaryAddress": "Hyderabad"
    }
]

export default class File extends Component {
    constructor(props) {
        super(props);
        this.state = {
            object: {
                name: "",id:0
            }
        }
    }

    nameChange = (value) => {
        console.log(value)
        for(let i=0 ; i < nameArray.length; i++){
            if(value = nameArray[i].id){
                this.state.object.name = nameArray[i].firstName …

我想row-fluid通过使用react-bootstrap来获得bootstrap类的结果，但是没有在库中获得标准方法。诸如Grid组件的流体道具之类的东西，但组件不支持Row。

我尝试浏览https://react-bootstrap.github.io/layout/上的文档，但没有得到任何重要帮助。