标签: react-bootstrap

我有几个引导行。当用户单击任何行时，该行的中间应出现一个弹出窗口并显示一些信息。然而，目前它在行尾之后弹出到最右侧。

这是我的 JSBin 链接，显示了代码：https://jsbin.com/rogeyufuku/1/edit ?css,js,output

我尝试通过将positionLeft设置为负值来重新定位它，如下所示：

<ReactBootstrap.Popover className="my-popover"
                    positionLeft={-300}
                    positionTop={20}
  >

但这没有用。

我还尝试使用简单的旧 CSS 规则来操作它，如下所示：

.my-popover {
  position: relative;
  left: -200px; 
}

但这也不起作用。

有什么想法可以按照我的需要渲染弹出窗口覆盖吗？

（包括此处的所有代码供参考，但 JSBin 链接有效）

编辑：这是它现在的样子：https://i.stack.imgur.com/4XeBU.png 这是我想要的样子：https://i.stack.imgur.com/VZaHX.jpg

我目前正在使用React Bootstrap将 Bootstrap React 组件添加到我的应用程序中。

当用户单击该按钮时，会出现一个弹出窗口，允许用户将项目添加到列表中。它看起来像下面这样：

当用户在输入框中键入内容并按“添加”时，它会向该按钮所在的 div 添加一行。但是，由于弹出框添加到了最末尾<body>，因此弹出框不会随着行数而移动增加。它看起来像下面这样：

适用的代码如下所示：

<OverlayTrigger trigger="click" placement="top" overlay={this.generatePopover()}>
  <Button bsSize="lg"> Add Income Source</Button>
</OverlayTrigger>

在哪里this.generatePopover()使用该<Popover>组件。

我正在使用此站点的react-bootstrap：http://react-bootstrap.github.io/components.html

我想知道如何自定义这样的选项卡（在选项卡部分）：

const tabsInstance = (
  <Tabs defaultActiveKey={2}>
    <Tab eventKey={1} title="Tab 1">Tab 1 content</Tab>
    <Tab eventKey={2} title="Tab 2">Tab 2 content</Tab>
    <Tab eventKey={3} title="Tab 3" disabled>Tab 3 content</Tab>
  </Tabs>
);

ReactDOM.render(tabsInstance, mountNode);

我想添加一个十字按钮来关闭它，但我没有找到如何做到这一点。你能帮我吗 ？

我正在使用react-bootstrap，并且在我的react网页中实现了一个下拉菜单。handleClick在我的下拉菜单中，当选择按钮时我将调用一个函数。

<Dropdown.Menu>\n    <Dropdown.Item name = "baudratestate1200" onSelect={this.handleClick}>1200</Dropdown.Item>\n    <Dropdown.Item name = "baudratestate2400" onSelect={this.handleClick}>2400</Dropdown.Item>\n    <Dropdown.Item name = "baudratestate4800" onSelect={this.handleClick}>4800</Dropdown.Item>\n    <Dropdown.Item name = "baudratestate9600" onSelect={this.handleClick}>9600</Dropdown.Item>\n</Dropdown.Menu>\n

这是我的handleClick功能：

handleClick = (eventkey, event) => {\n  console.log(eventkey)\n  console.log(event)\n}\n

然而，它event.target是空的，下面附上的是console.log我的客户端浏览器的：

Class {dispatchConfig: {\xe2\x80\xa6}, _targetInst: FiberNode, _dispatchInstances: FiberNode, nativeEvent: MouseEvent, _dispatchListeners: \xc6\x92, \xe2\x80\xa6}\nnativeEvent: (...)\ntype: (...)\ntarget: null\n

我尝试过绑定和不绑定构造函数中的函数，但两者都为 event.target 生成了空值

Class {dispatchConfig: {\xe2\x80\xa6}, _targetInst: FiberNode, _dispatchInstances: FiberNode, nativeEvent: MouseEvent, _dispatchListeners: \xc6\x92, \xe2\x80\xa6}\nnativeEvent: (...)\ntype: …

我想更改切换按钮的线条颜色。我尝试更改 Navbar.Toggle 的内联样式，但没有成功。有人有主意吗？

我正在使用以下

import Navbar from 'react-bootstrap/Navbar';
import Nav from 'react-bootstrap/Nav';
import NavDropdown from 'react-bootstrap/NavDropdown'

但我找不到像这样的多级下拉菜单

My-Menu
       menu-1
             menu-1-a
             menu-1-b   
       menu-2
       menu-3
            menu-3-a
            menu-3-b

“react-bootstrap”中是否有我可以使用的多级下拉菜单。

我正在尝试添加一个进度条用作评论，这真的很奇怪，因为没有显示任何内容。

我尝试从react-bootstrap 中复制/粘贴示例，但它根本不起作用。我也尝试了material-ui，但同样的事情......

我不明白为什么，我并没有使用它作为一种奇怪的方式。

<Col>
                        <Row className="review-summary">
                            <p> 5 </p>
                            <ProgressBar variant="info" now={60} bsPrefix="review-summary-progress"/>
                        </Row>
                        <Row className="review-summary">
                            <p> 4 </p>
                            <ProgressBar variant="info" now={60} bsPrefix="review-summary-progress"/>
                        </Row>
                        <Row className="review-summary">
                            <p> 3 </p>
                            <ProgressBar variant="info" now={60} bsPrefix="review-summary-progress"/>
                        </Row>
                        <Row className="review-summary">
                            <p> 2 </p>
                            <ProgressBar variant="info" now={60} bsPrefix="review-summary-progress"/>
                        </Row>
                        <Row className="review-summary">
                            <p> 1 </p>
                            <ProgressBar variant="info" now={60} bsPrefix="review-summary-progress"/>
                        </Row>
                    </Col>

CSS 是：

.review-summary {
    display: inline-flex;
}

.review-summary p {
    font-family: Source Sans Pro;
    font-size: 20px;
    font-weight: bold;
    font-stretch: normal;
    font-style: normal;
    line-height: 1.6; …

我正在使用react-bootstrap中的工具提示覆盖，但收到错误findDOMNode is deprecated in StrictMode。根据文档，使用overlaytrigger的函数形式可以避免React.findDOMNode调用，对于那些试图遵守严格模式的人来说，但我仍然收到如下错误。

index.js:1 Warning: findDOMNode is deprecated in StrictMode. findDOMNode was passed an instance of Transition which is inside StrictMode. Instead, add a ref directly to the element you want to reference.
in div (created by Tooltip)
in Tooltip (at NavMenu.tsx:31)
in Transition (created by Fade)
in Fade (created by Overlay)
in Overlay (created by Overlay)
in Overlay (created by OverlayTrigger)
in OverlayTrigger (at NavMenu.tsx:28)
in div (created by ForwardRef)
in ForwardRef (created by Nav) …

我遵循从 react-bootstrap 导入单个组件的建议，就像这样import Container from "react-bootstrap/Container";。我已经验证了整个代码库，每个导入都是相同的。然而，当我分析捆绑包时，它表明 react-bootstrap 已被完整捆绑。

任何想法我可能会错过什么？

我正在努力处理我的第一个引导代码。

我想使用这里的react-bootstrap 代码添加一个手风琴。

我想我也已经导入了正确的库。

但我仍然有这个错误： “错误：元素类型无效：需要一个字符串（对于内置组件）或一个类/函数（对于复合组件）但得到：未定义。您可能忘记从文件中导出您的组件它定义在，或者您可能混淆了默认和命名导入。”

如果有人可以帮忙，这是我的代码，非常感谢 ^^ Hugo

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

export class Maturite extends Component {
  render() {
      return (
        <div>
                  <div style={{marginTop: '150px'}}></div>

                  {/* This is the 1st method from react bootstrap for an Accordion which is NOT working for me  */}
                  <Accordion>
                    <Accordion.Item eventKey="0">
                        <Accordion.Header>Accordion Item #1</Accordion.Header>
                        <Accordion.Body>
                        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do …