在 React-Bootstrap 中有条件地禁用选项卡 [英] Disable tab conditionally in React-Bootstrap

问题描述

我对 React 非常陌生.我使用 react-bootstrap 构建了这个表单.我想在显示选项卡 1"值为否时禁用选项卡 1，并在未选中时禁用选项卡 2.

我在构造函数中定义的默认状态工作正常.但是，当我将选项卡 1 的值更改为否时，它并未被禁用.我也不知道如何在选项卡 2 和选项卡 3 中添加值参数.我应该在代码中添加什么才能使其工作?

import React, { Component } from 'react'import { Row, Col, FormGroup, FormControl, ControlLabel, Grid, Checkbox, Tab, Tabs } from 'react-bootstrap';导出默认类 Home 扩展组件 {构造函数(){极好的()this.state = {表1:假，表2:假，表 3:真}}使成为() {返回 (<div><Grid><Row><Col md={5}><FormGroup controlId="formControlsSelect"><ControlLabel>显示标签 1</ControlLabel><FormControl componentClass="select" placeholder="select" value={this.state.Tab1}><option value={true}>Yes</option><option value={false}>否</option></FormControl></FormGroup><br></br><表单组><内嵌复选框>标签 2</复选框><内嵌复选框>标签 3</复选框></FormGroup><Tabs bsStyle="tabs" justified defaultActiveKey={1}><Tab eventKey={1} title="Tab 1" disabled={this.state.Tab1}><p>表1</p></Tab><Tab eventKey={2} title="Tab 2" disabled={this.state.Tab2}><p>标签2</p></Tab><Tab eventKey={3} title="Tab 3" disabled={this.state.Tab3}><p>标签3</p></Tab></Tabs></Col></Row></Grid>

)}}

解决方案

您应该在选择的 FormControl 上设置一个 onChangeHandler，您将在其中根据选项的值更新状态.

import React, { Component } from 'react';进口 {排，科尔，表单组，表单控件，控制标签，网格，复选框，标签，标签来自'反应引导';导出默认类 Home 扩展组件 {构造函数(){极好的();this.state = {表1:假，表2:假，表3:假};}onChangeHandler = e =>{console.log(e.target.value);如果(e.target.value === '否'){this.setState({ Tab1: true });} 别的 {this.setState({ Tab1: false });}};使成为() {返回 (<div><网格 id="网格"><行><Col md={5}><FormGroup controlId="formControlsSelect"><ControlLabel>显示标签 1</ControlLabel><表单控件组件类=选择"占位符=选择"onChange={this.onChangeHandler}><option value="yes">Yes</option><option value="no">No</option></FormControl></FormGroup><br/><表单组><内嵌复选框>标签 2</复选框><内嵌复选框>标签 3</复选框></FormGroup><Tabs id="tabs" bsStyle="tabs" justified><标签id="1"事件密钥={1}标题="标签 1"禁用={this.state.Tab1}><p>表1</p></Tab><Tab id="2" eventKey={2} title="Tab 2"><p>标签2</p></Tab><Tab id="3" eventKey={3} title="Tab 3"><p>表3</p></Tab></Tabs></Col></行></网格>

);}}

I'm very new to React. I built this form using react-bootstrap. I want to disable tab 1 when "Show tab 1" value is No and disable tab 2 when it is unchecked.

A default state I defined in the constuctor worked correctly. However, when I changed tab 1 value to No, it was not disabled. I also have no idea how to add value parameters in tab 2 and tab 3. What should I add into my code to make it work?

import React, { Component } from 'react'
import { Row, Col, FormGroup, FormControl, ControlLabel, Grid, Checkbox, Tab, Tabs } from 'react-bootstrap';

export default class Home extends Component {
  constructor() {
    super()
    this.state = {
      Tab1: false,
      Tab2: false,
      Tab3: true
    }
  }
  render() {
    return (
      <div>
        <Grid><Row><Col md={5}>
          <FormGroup controlId="formControlsSelect"><ControlLabel>Show tab 1</ControlLabel>
            <FormControl componentClass="select" placeholder="select" value={this.state.Tab1}>
              <option value={true}>Yes</option>
              <option value={false}>No</option>
            </FormControl>
            </FormGroup>
            <br></br>
            <FormGroup>
              <Checkbox inline>Tab 2</Checkbox>
              <Checkbox inline>Tab 3</Checkbox>
            </FormGroup>
            <Tabs bsStyle="tabs" justified defaultActiveKey={1}>
              <Tab eventKey={1} title="Tab 1" disabled={this.state.Tab1}>
                <p>Tab 1</p>
              </Tab>
              <Tab eventKey={2} title="Tab 2" disabled={this.state.Tab2}>
                <p>Tab 2</p>
              </Tab>
              <Tab eventKey={3} title="Tab 3" disabled={this.state.Tab3}>
                <p>Tab 3</p>
              </Tab>
            </Tabs>
        </Col></Row></Grid>
      </div>
    )
  }
}

解决方案

You should set up an onChangeHandler on the select FormControl, where you will update the state, based on the option's value.

import React, { Component } from 'react';
import {
  Row,
  Col,
  FormGroup,
  FormControl,
  ControlLabel,
  Grid,
  Checkbox,
  Tab,
  Tabs
} from 'react-bootstrap';

export default class Home extends Component {
  constructor() {
    super();
    this.state = {
      Tab1: false,
      Tab2: false,
      Tab3: false
    };
  }

  onChangeHandler = e => {
    console.log(e.target.value);
    if (e.target.value === 'no') {
      this.setState({ Tab1: true });
    } else {
      this.setState({ Tab1: false });
    }
  };

  render() {
    return (
      <div>
        <Grid id="grid">
          <Row>
             <Col md={5}>
              <FormGroup controlId="formControlsSelect">
                <ControlLabel>Show tab 1</ControlLabel>
                <FormControl
                  componentClass="select"
                  placeholder="select"
                  onChange={this.onChangeHandler}
                >
                  <option value="yes">Yes</option>
                  <option value="no">No</option>
                </FormControl>
              </FormGroup>
              <br />
              <FormGroup>
                <Checkbox inline>Tab 2</Checkbox>
                <Checkbox inline>Tab 3</Checkbox>
              </FormGroup>
              <Tabs id="tabs" bsStyle="tabs" justified>
                <Tab
                  id="1"
                  eventKey={1}
                  title="Tab 1"
                  disabled={this.state.Tab1}
                >
                  <p>Tab 1</p>
                </Tab>
                <Tab id="2" eventKey={2} title="Tab 2">
                  <p>Tab 2</p>
                </Tab>
                <Tab id="3" eventKey={3} title="Tab 3">
                  <p>Tab 3</p>
                </Tab>
              </Tabs>
            </Col>
          </Row>
        </Grid>
      </div>
    );
  }
}

这篇关于在 React-Bootstrap 中有条件地禁用选项卡的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！