禁用非默认项目的复选框选中 [英] Disable checkbox for item that is not defaultChecked
本文介绍了禁用非默认项目的复选框选中的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我有两个复选框项。其中一个将在进入页面时由道具默认选中。根据默认选择的项目,应在进入页面后禁用其他复选框项目。
此外,用户可以取消选择默认选中项,在这种情况下,两个复选框都将启用以供选择。然后,当用户选择这两个选项之一时,未选中的选项将再次变为禁用状态。
有效方法:当我取消选中默认选项并重新选中两个复选框中的一个时,禁用行为正常工作(因为未选中的选项变为禁用)。
不起作用且需要找到修复程序的选项:当我进入页面时,需要禁用默认情况下未选中的选项。我需要弄清楚如何在进入页面时禁用未选中选项。
我有一个类组件,其内容如下:
constructor(props) {
super(props);
this.state = {
aSelected: false,
bSelected: false
}
}
handleCheckboxChange = (e) => {
const { checked, value } = e.target;
// NOTE: 'checked' is a boolean
if(value=="a") {
this.setState( {aSelected: checked} );
}
if(value=="b") {
this.setState( {bSelected: checked} );
}
}
// returns default value of each checkbox based on props
handleDefault = (trueOrFalse, name) => {
if(name == "a") { return trueOrFalse; }
if(name == "b") { return trueOrFalse; }
}
在呈现返回中的某个位置,我有以下内容:
<input>
type="checkbox"
value="a"
onChange={this.handleCheckboxChange}
disabled={ (this.state.aSelected || (!this.state.aSelected && !this.state.bSelected) ) ? false : true}
defaultChecked={this.handleDefault(this.props.selected["a"], "a")}
</input>
<input>
type="checkbox"
value="b"
onChange={this.handleCheckboxChange}
disabled={ (this.state.bSelected || (!this.state.aSelected && !this.state.bSelected) ) ? false : true}
defaultChecked={this.handleDefault(this.props.selected["b"])}
</input>
推荐答案
此时您正在通过false
值初始化aSelected
和bSelected
状态,为了处理您的场景,您可以通过组件constructor
中的道具来初始化您的状态,如下例:
class App extends React.Component {
constructor(props) {
super(props);
this.state = {
aSelected: props.selectedValue == 'a',
bSelected: props.selectedValue == 'b',
};
}
handleCheckboxChange = (e) => {
const { checked, value } = e.target;
if (value == 'a') {
this.setState({ aSelected: checked });
}
if (value == 'b') {
this.setState({ bSelected: checked });
}
};
render() {
return (
<div>
<input
type="checkbox"
value="a"
onChange={this.handleCheckboxChange}
defaultChecked={this.props.selectedValue == 'a'}
disabled={
this.state.aSelected ||
(!this.state.aSelected && !this.state.bSelected)
? false
: true
}
/>
<input
type="checkbox"
value="b"
defaultChecked={this.props.selectedValue == 'b'}
onChange={this.handleCheckboxChange}
disabled={
this.state.bSelected ||
(!this.state.aSelected && !this.state.bSelected)
? false
: true
}
/>
</div>
);
}
}
ReactDOM.render(<App selectedValue='a'/>, document.getElementById('root'));
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="root"></div>
这篇关于禁用非默认项目的复选框选中的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文