标签: react-bootstrap

我找不到有关如何使用 react-bootstrap 为单选按钮调用 onChange 的文档。我省略了提交表单的按钮。它适用于所有其他领域，例如文本输入，所以我忽略了它。

对于每个，teacherRate 和 totalRate，每个单选按钮的值分别为 1、2、3，但我不确定如何将其绑定。

我也知道我不能让每个类别的值都相同。

我不打算做按钮组。

我在网上寻找类似的答案，但找不到任何答案。有一个人像我一样发布了他们的问题，但后来回答说他实现了 react-bootstrap 但没有发布他的解决方案。积分不够，无法回复。

    class Assignment extends Component {

      constructor(props){
        super(props)
        this.state = {
          form: {
            teacherRate: '',
            overallRate: ''
          }
        }
      }

      handleChange(event){
        const formState = Object.assign({}, this.state.form)
        formState[event.target.name] = event.target.value
        this.setState({form: formState})
      }

      render() {
        return (
          <Grid>
            <form>

              <FormGroup>
                <ControlLabel id='adminRate'>Rate the Teacher</ControlLabel>
                  <Radio name='adminRate' type='integer' inline
                    onChange={this.handleChange.bind(this)}
                    value={this.state.form.adminRate}>1</Radio>{' '}
                  <Radio name='adminRate' type='integer' inline
                    onChange={this.handleChange.bind(this)}
                    value={this.state.form.adminRate}>2</Radio>{' '}
                  <Radio name='adminRate' type='integer' inline
                    onChange={this.handleChange.bind(this)}
                    value={this.state.form.adminRate}>3</Radio>{' '}
              </FormGroup>

              <FormGroup>
                <ControlLabel …

使用NavDropdownin react-bootstrap，我无法设置其颜色或背景颜色的样式...

<NavDropdown eventKey={3} className="text-center" style={{ fontSize: `130%` }} title="Items to Choose" >
  <LinkContainer to="/about">
    <MenuItem eventKey={3.1} className="text-center">About</MenuItem>    
  </LinkContainer>
  <MenuItem divider />
  <LinkContainer to="/products">
    <MenuItem eventKey={3.2} className="text-center">Products</MenuItem>    
  </LinkContainer>      
  <MenuItem divider />
  <LinkContainer to="/blog-index">
    <MenuItem eventKey={3.3} className="text-center">Blog</MenuItem>    
  </LinkContainer>
</NavDropdown>

我可以使用 更改字体大小style={{ fontSize: '130%' }}，但我还想使用 ..

style={{ fontSize: '130%', color: '#fff', backgroundColor: 'blue' }}

...但color并backgroundColor没有在括号内工作。

我尝试做的一件事是将<NavDropdown>元素包装在一个 style 中div，但这会弄乱 Navbar 元素的对齐方式。

我有一个下拉按钮，但是，它的（动态更改的）标题可能太长而无法容纳。因此，我想知道是否有办法将太长的标题自动换行到第二行？

  <Panel >
       <Panel.Body collapsible>

           <ButtonGroup vertical >

                    dsadas
                    <DropdownButton title="Dropdown2re12r412r12r12r2r2">
                        <MenuItem eventKey="1">Dropdown link</MenuItem>
                        <MenuItem eventKey="2">Dropdown link</MenuItem>
                    </DropdownButton>
                    fwf21
                    <DropdownButton title="Dropdown" >
                        <MenuItem eventKey="1">Dropdown link</MenuItem>
                        <MenuItem eventKey="2">Dropdown link</MenuItem>
                    </DropdownButton>

            </ButtonGroup>
        </Panel.Body>
    </Panel>

编辑：添加截图

标签不显示内容并且标签上没有样式

选项卡没有显示内容，这是代码。我该如何解决这个问题？

我究竟做错了什么？

这段代码几乎与 react-bootstrap 页面上的代码相似

//simple tabs.js

import React, {Component} from 'react';
import {Tabs, Tab} from 'react-bootstrap';
import TabItem from './TabItem';
import data from './data'

class SimpleTabs extends Component{

    constructor(props){
        super(props);
        this.state = {
            key: 1 | props.activeKey
        }
        this.handleSelect = this.handleSelect.bind(this);
    }

    handleSelect (key) {
        console.log("selected " + key);
        this.setState({key})
    }
    render(){
        return (
             <Tabs
            activeKey={this.state.key}
            onSelect={this.handleSelect}
            id="controlled-tab-example"
            >
                <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 …

我正在使用 ReactStrap 的 ButtonGroup 和 Button。当您单击其中一个按钮时，我设置了一个 onClick 函数：

< ButtonGroup >
  <Button>Edit</Button>
  <Button onClick={console.log("Print some text")}>Print text</Button>
  <Button>Set as default</Button>
</ButtonGroup >

但是当我加载页面时，这就是我得到的：

在我什至点击按钮之前。如果我点击它，控制台中什么也没有。有任何想法吗？

在我的应用程序中，我使用 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 …

如果状态作为 props 传递给组件，并且该组件位于 内部Tab.Pane，则当状态更改时，它不会更新其 props。

仅当我以编程方式以 250 来回切换选项卡setTimeout（或显然手动）时，它才有效，这意味着需要再次切换选项卡以重新渲染组件（因此获得更新的状态）

奇怪的是，如果我使用存储系统作为 redux 将 prop 传递给组件而不是状态，那么这是同样的事情。

我还尝试添加mountOnEnter={true} unmountOnExit={true}到窗格中，顺便说一句，它已经设置为将Tab.Container所有内容包裹在其中，但没有任何区别。

重现该行为的步骤：

1. 创建useState某种状态存储
2. 将其作为 prop 分配给组件
3. 将组件放置在react-bootstrap中 Tab.Pane
4. 尝试改变状态
5. 该组件不会反映更新的状态/存储

使用的react-bootstrap版本："react-bootstrap": "^1.5.0"

我的 Tab.Pane 示例：

<Tab.Pane eventKey="items">
   <ItemsList items={data} />
</Tab.Pane>