实现Checkbox的单选效果、Radio.Group单选框组的联动及取消效果

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