标签: 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 和 Formik。我希望引导程序在我按下提交按钮后显示该字段无效（例如不是电子邮件，但应该是）。然后当我开始在字段中输入新值时，它应该会消失。在我使用的教程中，我只找到了在用户输入值的同时显示该字段无效的方法？

怎么做？如何设置isInvalid仅在使用 Formik 提交后才显示错误？

这是我当前的代码

import * as yup from "yup";
import React from "react";
import Form from "react-bootstrap/Form";
import Button from "react-bootstrap/Button";
import {Formik} from "formik";
import {loginActions} from "../_actions/loginActions";
import {connect} from "react-redux";
import {loginService} from "../_services";

const schema = yup.object().shape({
    username: yup.string().email("Login musi by? w formie e-mail").required("Wype?nij pole login"),
    password: yup.string().required("Wype?nij pole has?o")
});

class LoginForm extends React.Component {

    constructor(props) {
        super(props);
        this.handleSubmit = this.handleSubmit.bind(this);
    }

    handleSubmit(e) {
        const {username, password} …

我正进入（状态

TypeError: Enzyme::Selector 在我尝试测试组件时需要字符串、对象或组件构造函数

我尝试使用ReactWrapper，使用 div 的类并创建一个 id。没有任何效果。

import React from "react";
import Dashboard from "../Containers/Dashboard/Dashboard";
import { BrowserRouter as Router } from 'react-router-dom'
import { configure, shallow, mount } from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';
import Container from 'react-bootstrap';
let container = null;
configure({adapter: new Adapter()});

describe('<Dashboard />', () => {
  let wrapper;

  beforeEach(() => {
    const fakeTopic = [
      {
        "name": "javascript",
        "display_name": "JavaScript",
        "short_description": "JavaScript (JS) is a lightweight interpreted programming language with first-class functions.", …

我有一个包含 3 个组件的模态。每个组件代表一个阶段，例如第一个组件是在用户点击next时输入用户的名字，然后它会转到下一个组件，即输入地址然后用户点击next，它会将用户带到最后一步，输入昵称。在input组件中的每个元素上，它都有一个autoFocus. 到目前为止，在最后两个组件中，inputs除了第一个组件之外，还有一个 autoFocus。

不知道为什么第一个没有它，当我初始化模态时，我看到input没有autoFocus，然后我点击下一步然后第二个组件input有它，我回到第一个组件 - 点击后退按钮 - 然后我看到input第一个组件有一个autoFocus. 很奇怪，我一直在尝试很多方法来解决这个问题，从设置autoFocus={false}到模态，ref为第一个输入创建一个但仍然无法正常工作。

看起来这是模态的问题，它被初始化，焦点在某处而不是input. 有没有人遇到过这个问题？

示例（伪）代码

//Component Hosting the modal

render(){

    if(this.state.modal_stage === 1){
        <FirstName />
    }else if(this.state.modal_stage === 2){
        <LasgtName />

    }else if(this.state.modal_stage === 3){
        <NickName />
    }
    return(

        <Modal 
            dialogClassName="locationModal customModal"
            show={this.state.modalShow} onHide={this.hideModal}
            autoFocus="false">
            <Modal.Header>
                <div className="closeModal" onClick={this.hideModal}></div>
            </Modal.Header>

            <Modal.Body>

                { current_stage}

            </Modal.Body>

            <Modal.Footer>
                {backButton}
                {nextButton}
            </Modal.Footer>

        </Modal> …

我正在尝试从导航栏中的链接控制轮播。我现在拥有的是 HomePage 组件（NavBar 和 Carousel 的父组件）中的 click 方法，它根据在 NavBar 中单击的链接更新当前选定索引的状态。我对如何让 Carousel 收听索引状态并在按下 Link 后移动幻灯片的方法一无所知。当我最初设置 activeIndex 时，我无法让它正确收听作为道具传递的索引，并且 onSelect 处理程序也基本上什么都不做。

更新：HomePage => 刚刚向状态添加了方向以反映下面轮播中更新 v2 的变化。

class HomePage extends Component {
    constructor(props){
        super(props);
        this.state = {index: '0', direction: null};
    }

    handleclick = (i) => {
        this.setState({direction: (this.state.index>i) ? 'prev':'next', index: i});
    }

    render() {
        return (
            <Container className='containerCustom d-flex h-100 w-100' fluid>
                <Row className='fullscreen-bg h-100 w-100'>
                    <video loop autoPlay className='fullscreen-bg_video w-100 h-100'>   
                        <source src={background} type='video/mp4'/>
                    </video>
                </Row>
                <Row className='flex-fill w-100 navrow' noGutters>
                    <Col …

我正在我的第一个 react-bootstrap 网站上工作，我注意到导航栏中的下拉菜单不允许在悬停时下拉。

我想知道是否有解决方法。我尝试在我的 CSS 中添加一些代码。演示 - https://codesandbox.io/s/react-bootstrap-nav-active-link-5v5jq?fontsize=14&hidenavigation=1&theme=dark

/*MENU*/
.dropdown:hover {
  display: block;
}
/*END MENU*/

然而，这并没有奏效

这是代码。

import React from 'react';
import {Nav, Navbar, NavDropdown } from 'react-bootstrap';
import '../App.css';

function Header() {
    return (
            <Navbar bg="transparent" variant="dark" expand="lg">
            <Navbar.Brand href="#home" className="App-logo">AdStichr</Navbar.Brand>
            <Navbar.Toggle aria-controls="basic-navbar-nav" />
            <Navbar.Collapse id="basic-navbar-nav">
                <Nav className="ml-auto">
                <Nav.Link href="#home">Home</Nav.Link>
                <Nav.Link href="#link">Link</Nav.Link>
                <NavDropdown title="Dropdown" id="basic-nav-dropdown" alignRight>
                    <NavDropdown.Item href="#action/3.1">Action</NavDropdown.Item>
                    <NavDropdown.Item href="#action/3.2">Another action</NavDropdown.Item>
                    <NavDropdown.Item href="#action/3.3">Something</NavDropdown.Item>
                    <NavDropdown.Divider />
                    <NavDropdown.Item href="#action/3.4">Separated link</NavDropdown.Item>
                </NavDropdown>
                </Nav>

            </Navbar.Collapse>
            </Navbar>
    )
}
export default Header;

甚至试过这个 …

我想在等待 API 调用时使用 react-bootstrap 制作加载动画。我知道我应该如何设置状态来启动和停止它，我只是不知道如何使用 react-bootstrap 来做到这一点。我想我必须使用叠加层（用于“淡入淡出”效果）和微调器，但不确定如何使用。

谢谢！

我正在使用以下

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 导入单个组件的建议，就像这样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 …