标签: react-bootstrap

我试图在点击反应选择选定的值元素时显示一个弹出窗口，如下所示：

当我点击酥料饼触发我的问题发生，下拉打开，酥料饼太...我只是想开酥料饼的，我试过了e.nativeElement.stopPropagation，e.stopPropagation，e.preventDefault等没有成功。这是一个沙箱 如果您想知道我是如何做到这一点以及如何重现该问题的。

https://codesandbox.io/s/pjv7vmlv3j

谢谢你的帮助

我在我的 React 项目中使用react-bootstrap并按照他们记录的示例创建一个表单。如果我理解正确，我只需要导入form即可获得所有表单功能：

import Form from 'react-bootstrap/Form'

具体来说，我正在关注这个非常简单的例子：

<Form>
  <Form.Group as={Row} controlId="formPlaintextEmail">
    <Form.Label column sm="2">
      Email
    </Form.Label>
    <Col sm="10">
      <Form.Control plaintext readOnly defaultValue="email@example.com" />
    </Col>
  </Form.Group>

  <Form.Group as={Row} controlId="formPlaintextPassword">
    <Form.Label column sm="2">
      Password
    </Form.Label>
    <Col sm="10">
      <Form.Control type="password" placeholder="Password" />
    </Col>
  </Form.Group>
</Form>

但是，我在 Chrome DevTools 中收到以下错误：

MyComponent.jsx:430 Uncaught ReferenceError: Row is not defined

我尝试导入行，但这并不能解决错误。任何想法缺少什么？

在我看来，要么他们记录的示例不完整或已损坏，要么我需要添加一些额外的导入以使用 react-bootstrap。

我正在使用 react bootstrap 并尝试将 NavBar 菜单向右对齐

            <Nav className="ml-auto paddingLeft5" alignRight>
                <NavDropdown title="Account" id="basic-nav-dropdown" alignRight>
                    <NavDropdown.Item href="/privacySettings">Privacy Settings</NavDropdown.Item>
                    <NavDropdown.Item href="/signOut">Sign Out</NavDropdown.Item>
                </NavDropdown>
                <NavDropdown title="Help" id="basic-nav-dropdown" alignRight>
                    <NavDropdown.Item href="/contactUs">Contact us</NavDropdown.Item>
                    <NavDropdown.Item href="/termsAndConditions">Terms and Conditions</NavDropdown.Item>
                </NavDropdown>
            </Nav>

然而，这似乎不起作用。我正在使用“react-bootstrap”：“^1.0.0-beta.10”、“react-dom”：“^16.8.4”和“bootstrap”：“^4.3.1”。

结果可以在附图中看到。

我无法将菜单向右对齐，任何帮助将不胜感激。

我想更改反应引导模式弹出窗口的背景颜色。

我的模态代码是 -

<Modal
    show={this.state.show}
    onHide={this.handleClose}
    dialogClassName="modal-90w public-profile-modal-class"
    size='lg'
    aria-labelledby="example-custom-modal-styling-title"
>

那么如何改变呢？

我正在尝试改变 react-bootstrap 中手风琴元素移动方式的方向。目前它向下移动。有没有一种简单的方法可以让它向上打开？

下面是我的一个组件的示例。我希望能够向上而不是向下打开它，原因是我将它放在屏幕底部，所以当我在默认设置下打开它时，它会向下而不是向上：

import React from 'react';
import { Accordion, Card, Button } from 'react-bootstrap';
import 'bootstrap/dist/css/bootstrap.min.css';

const InfoBox = ( props ) => {

    const Styles = {
        width: "100%",
        marginTop: "147%"
    }

    return (
        <div style={Styles}>
        <Accordion>
            <Card>
            <Card.Header>
                <Accordion.Toggle as={Button} variant="link" eventKey="0">
                    Link Info
                </Accordion.Toggle>
            </Card.Header>
            <Accordion.Collapse eventKey="0">
                <Card.Body>
                <div>{`Link Address: ${props.sa}`}</div>
                <div>{`community board: ${props.cb}`}</div>
                <div>{`lat: ${props.lat}`}</div>
                <div>{`lon: ${props.lon}`}</div>
                </Card.Body>
            </Accordion.Collapse>
            </Card>    
        </Accordion>
        </div>
    )
};

export default InfoBox;

我正在使用 react-bootstrap，并且有一个带有插入符号的按钮，可以触发下拉列表。

但是我需要使用垂直的 3 个点，而不是按钮样式。

我有一个对三个点使用 CSS 类的跨度，但似乎无法找到摆脱按钮和插入符号的方法。

我现在最紧张的是：

<Dropdown>
    <Dropdown.Toggle>
      <span className="threedots"></span>
    </Dropdown.Toggle>
    <Dropdown.Menu size="sm" title=""> 
      <Dropdown.Header>Options</Dropdown.Header>
      <Dropdown.Item .... ></Dropdown.Item>
    </Dropdown.Menu>
 </Dropdown>

我只想看到三个点（我将添加鼠标悬停效果）。有没有办法使用快照作为切换>

假设我有一个如下所示的数组：

const array = [0, 1, 2, 3, 4, 5, 6, 7]

我想要做的是迭代 .map 函数中的每 2 个对象，但它需要在我的渲染中看起来像这样（注意我使用的是 React Bootstrap）：

<Row>
<Col>array[0]</Col>
<Col>array[1]</Col>
</Row>


<Row>
<Col>array[2]</Col>
<Col>array[3]</Col>
</Row>

等等...

因此，对于每 2 个对象，它需要拥有自己的行，然后在关闭 Row 并开始新 Row 之前渲染这 2 个对象（如果它有更多元素）。

实现这一目标的最佳方法是什么？

我使用 react-bootstrap <Form.Control type="date"> 并且日历图标或日期选择器自动设置在表单字段的右侧/末尾。我想将日历图标/日期选择器移动到表单字段的左侧/开头，或者它紧跟在日期之后。我试图找到合适的 node_module 来更改日历图标位置的 CSS 代码，但我找不到它。

那么有谁知道我应该在哪里修改 CSS 或者有更好的解决方法吗？

下面是表格现在的样子：

我正在尝试使用 React 功能组件在 Typescript 中从react-bootstrap 页面实现自定义切换下拉示例。

这是我的组件代码：

    import React from 'react';
    import Dropdown from 'react-bootstrap/Dropdown';
    import FormControl from 'react-bootstrap/FormControl';


    export const DropdownSelector =() => (
      <Dropdown>
        <Dropdown.Toggle as={CustomToggle} id="dropdown-custom-components">
          Custom toggle
        </Dropdown.Toggle>

        <Dropdown.Menu as={CustomMenu}>
          <Dropdown.Item eventKey="1">Red</Dropdown.Item>
          <Dropdown.Item eventKey="2">Blue</Dropdown.Item>
          <Dropdown.Item eventKey="3" active>
            Orange
          </Dropdown.Item>
          <Dropdown.Item eventKey="1">Red-Orange</Dropdown.Item>
        </Dropdown.Menu>
      </Dropdown>
    )

    // The forwardRef is important!!
    // Dropdown needs access to the DOM node in order to position the Menu
    const CustomToggle = React.forwardRef(({ children, onClick }, ref) => (
      <a …

假设我想在退出模态时阻止事件传播，例如在单击背景或将关闭模态的退出按钮时。但是它会将我重定向到（父母）？退出时的 onClick 事件。

<Modal onHide={(e) => {
e.stopPropagation();
setShow(false);
...
}}>

<Modal/>

以上是行不通的。我也试过onExit哪个也不起作用。