![选项 选项](https://c1.lmlphp.com/image/static/default_avatar.gif)
本文介绍了在 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 中有条件地禁用选项卡的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!