在 React-Bootstrap 中有条件地禁用选项卡

Question

我对 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';

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>
    )
  }
}

Answer 1

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

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>
    );
  }
}