javascript - 在 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';
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>
)
}
}
解决方案
您应该在 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>
);
}
}