蚂蚁设计将Radio.Group分为两个部分

如何解决蚂蚁设计将Radio.Group分为两个部分

我想将Radio.Group分为两行或更多行，但最多保留1个选定值。在纯HTML中，只要您使用相同的name，就可以在更改值时取消选中单选按钮。我无法用蚂蚁复制它。

<Radio.Group name="stone_color" options={["Red","Blue"]} optionType={"button"}
                   buttonStyle={"solid"} />
<Radio.Group name="stone_color" options={["Green","Yellow"]} optionType={"button"}
                   buttonStyle={"solid"} />

即使这些名称相同，它们仍然允许同时选择两个值。

解决方法

要实现这一目标，您只需要一个Radio.Group，就可以在其中创建一个布局。请参见this链接。

如果您的数据来自数组，我建议您使用一个映射并在其上放置一些分离逻辑。

,

您可以通过添加块组件或为Radio组件使用{display：“ block”}传递样式道具来实现。

<Radio.Group>
  <div>
    <Radio value="red"> Red </Radio>
    <Radio value="green"> Green </Radio>
  </div>
  <div>
    <Radio value="yellow"> Yellow </Radio>
    <Radio value="blue"> Blue </Radio>
  </div>
</Radio.Group>