alibaba / alist

Alibaba Group Unified List Solution.

Home Page:https://alist.wiki

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Checkbox.Group 表现异常

kostark opened this issue · comments

commented

Antd Checkbox.Group 有自定义布局的功能,在 wrapper 后,这个功能有异常。具体情况如下:

  • 有且只有在 Checkbox.Group 传入 options 属性下有效。但是此时不能使用 Grid 布局。
  • Checkbox.Group 下使用 children 方式输出节点,不管是 Col 还是 Checkbox 都会导致:点选任意一个选择框,所有选择框都会被选中。

代码如下

<Checkbox.Group
    // options={groupData}
>
    {
        {/*<Col>*/}
        groupData && groupData.length > 0 && groupData.map(data => (
            <Checkbox key={data.value} value={data.value}>{data.label}</Checkbox>
        ))
        {/*</Col>*/}
    }
</Checkbox.Group>

select-and-selectall

@kostark 非常非常非常抱歉这么晚回复这个issue,应该是比较尴尬的一个状况,之前是想着wrapper把这部分给自己包掉,但是想了很久,还是放弃了。

Checkbox依靠context实现这个效果,并没有依赖16的context, 所以用函数的方法没法把这种情况给包掉,如果用class要做的事情又违背了wrapper的本意,最终给出以下的解法:

升级到 nowrapper@1.0.23 , 增加CheckboxGroup.Item实际为真实的Antd的Checkbox(Radio也一样)

<CheckboxGroup style={{ width: '100%' }}>
    <Row>
        <Col span={8}><CheckboxGroup.Item value="A">A</CheckboxGroup.Item></Col>
        <Col span={8}><CheckboxGroup.Item value="B">B</CheckboxGroup.Item></Col>
        <Col span={8}><CheckboxGroup.Item value="C">C</CheckboxGroup.Item></Col>
        <Col span={8}><CheckboxGroup.Item value="D">D</CheckboxGroup.Item></Col>
        <Col span={8}><CheckboxGroup.Item value="E">E</CheckboxGroup.Item></Col>
        <Col span={8}><CheckboxGroup.Item value="X">X</CheckboxGroup.Item></Col>
    </Row>
</CheckboxGroup>