实现Checkbox的单选效果、Radio.Group单选框组的联动及取消效果
- Checkbox的单选效果
- 思路:利用Checkbox中的disabled属性,在选中一个后,禁止选择,除非取消选择项才能重新选择
示例:两个复选框,只能选中一个
state: any = {
hostnum:0,
hostvalue:[{label:'选项1',checked:true},{label:'选项2',checked:true}]
}
<div className='xxxx'>
<Checkbox
checked={hostvalue[0].checked}
disabled={hostvalue[1].checked}
onChange={this.onChange1}
>
{hostvalue[0].label}
</Checkbox>
<Checkbox
checked={hostvalue[1].checked}
disabled={hostvalue[0].checked}
onChange={this.onChange2}
>
{hostvalue[1].label}
</Checkbox>
</div>
onChange1 = e => {
const {hostnum, hostvalue } = this.state
const arr = hostvalue.filter(it => !it.checked)
let temp = hostvalue
temp[0].checked = e.target.checked
//不改变hostnum的值,点击无法选中
this.setState({
hostvalue: temp,
hostnum:arr.length
});
};
onChange2 = e => {
const {hostnum, hostvalue } = this.state
const arr = hostvalue.filter(it => !it.checked)
let temp = hostvalue
temp[1].checked = e.target.checked
this.setState({
hostvalue: temp,
hostnum:arr.length
});
};
- Radio.Group单选框组的联动及取消效果
- 思路:这是一个伪装的单选框可取消样式;单选框赋值必须选中,所以创造一个新的无法赋值单选组当做初始化未选择状态,想要选中单选组可联动可使用Radio.Group的value属性,使用value属性不赋值会导致选项不可点击。
两组单选框,点击上一组单选框的选项,下一组有对应变化(选择方式1、2、3时,默认选择本次,选择方式4时默认选择2),也可更改下一组默认选项,点击重置按钮,上下单选组清空
state: any = {
hostOrder:'1',
hostOrderTime:'1',
reloadKey:false,
}
reloadOnclick = () => {
this.setState({
reloadKey:true,
hostOrder:'',
hostOrderTime:''
})
}
<div className=''>
<Button type="primary" title="重置" icon="reload" onClick={(e) => this.reloadOnclick()} />
</div>
<div style={{display:reloadKey ?'inline':'none'}}>
<div className=''>执行方式:</div>
<Radio.Group onChange={this.onChange} value={hostOrder}>
<Radio value={'1'}>方式1</Radio>
<Radio value={'2'}>方式2</Radio>
<Radio value={'3'}>方式3</Radio>
<Radio value={'4'}>方式4</Radio>
</Radio.Group>
<div className=''>执行次数:</div>
<Radio.Group onChange={this.TimeonChange} value={hostOrderTime}>
<Radio value={'1'}>本次</Radio>
<Radio value={'2'}>永久</Radio>
</Radio.Group>
</div>
<div style={{display:reloadKey ?'none':'inline'}}>
<div className=''>执行方式:</div>
<Radio.Group onChange={this.onChange1} >
<Radio value={'1'}>方式1</Radio>
<Radio value={'2'}>方式2</Radio>
<Radio value={'3'}>方式3</Radio>
<Radio value={'4'}>方式4</Radio>
</Radio.Group>
<div className=''>执行次数:</div>
<Radio.Group onChange={this.TimeonChange1} >
<Radio value={'1'}>本次</Radio>
<Radio value={'2'}>永久</Radio>
</Radio.Group>
</div>
onChange = e => {
const temp = e.target.value
if(temp == '4'){
this.setState({
hostOrder:e.target.value,
hostOrderTime:'2'
});
}else{
this.setState({
hostOrder:e.target.value,
hostOrderTime:'1'
});
}
};
TimeonChange = e => {
this.setState({
hostOrderTime:e.target.value
});
};
onChange1 = e => {
console.log(e.target,'-----',this.state.reloadKey)
this.setState({
reloadKey:true,
hostOrder:e.target.value
});
};
TimeonChange1 = e => {
this.setState({
reloadKey:true,
hostOrderTime:e.target.value
});
};