antd-design 3.x checkBox.Group 选中项数组不受控

心已赠人 2022-08-31 07:15 141阅读 0赞

博主使用antd-design 3.x checkBox.Group 选中项数组不受控

一共有10个选项，例如：鱼香肉丝、爆炒田鸡、茄子肉末...、其他

我的目的是当用户选择了其他，清空其他选中项

使用Form表单时，即便改变了数据checksList也无法受控

因此不使用formItem，使用原始的方式处理（value）即可实现数组、选中项受控：

onChange = (checkedValues) => {
        const { onChangeDrawer, type, form } = this.props
        let checks = checkedValues.slice()
        let str = '其他（选择此项则无法选择其他原因，请慎重选择）'
        if (checks.includes(str)) {
          checks = [str]
        }
        this.props.onChangeDrawer(type, 'cancelReason', checks)
        this.setState({ checkedList: checks })
      }

<Checkbox.Group onChange={onChange} value={this.state.checkedList}>
            <Row style={
       { marginBottom: 15 }}>
              <Col span={6}>
                <Checkbox value="啊啊啊">啊啊啊</Checkbox>
              </Col>
              <Col span={6}>
                <Row>
                  <Checkbox value="不不不">不不不</Checkbox>
                </Row>
                <Row>
                  <Checkbox value="冲冲冲">冲冲冲</Checkbox>
                </Row>
                <Row>
                  <Checkbox value="违反方法纪律">违反方法纪律</Checkbox>
                </Row>
              </Col>
              <Col span={6}>
                <Row>
                  <Checkbox value="违反等等纪律">违反等等纪律</Checkbox>
                </Row>
                <Row>
                  <Checkbox value="嘎嘎嘎">嘎嘎嘎</Checkbox>
                </Row>
                <Row>
                  <Checkbox value="违反生活纪律">违反生活纪律</Checkbox>
                </Row>
              </Col>
              <Col span={6}>
                <Row>
                  <Checkbox value="咯咯咯">咯咯咯</Checkbox>
                </Row>
                <Row>
                  <Checkbox value="其他">其他</Checkbox>
                </Row>
                <Row>
                  <Checkbox value="涉法行为">涉法行为</Checkbox>
                </Row>
              </Col>
            </Row>
    
            <Row style={
       { marginBottom: 15 }}>
              <Col span={6}>
                <Checkbox value="具体表现">具体表现</Checkbox>
              </Col>
              <Col span={6}>
                <Row>
                  <Checkbox value="呃呃呃">呃呃呃</Checkbox>
                </Row>
                <Row>
                  <Checkbox value="工作消极懈怠">工作消极懈怠</Checkbox>
                </Row>
                {/* <Row>
                      <Checkbox value="涉法行为">涉法行为</Checkbox>
                    </Row> */}
              </Col>
              <Col span={6}>
                <Row>
                  <Checkbox value="去去去">去去去</Checkbox>
                </Row>
                <Row>
                  <Checkbox value="我问问">我问问</Checkbox>
                </Row>
              </Col>
              <Col span={6}>
                <Row>
                  <Checkbox value="宗旨观念淡薄">宗旨观念淡薄</Checkbox>
                </Row>
                <Row>
                  <Checkbox value="道德行为不端">道德行为不端</Checkbox>
                </Row>
              </Col>
            </Row>
    
            <Row>
              <Col span={6}>
                <Checkbox value="其他（选择此项则无法选择其他原因，请慎重选择）">其他（选择此项则无法选择其他原因，请慎重选择）</Checkbox>
              </Col>
            </Row>
          </Checkbox.Group>