如何在Antd中使用嵌套的单选按钮组？

Question

看来antd不支持嵌套的单选按钮组，因此我将不得不自己构造输入元素。 但是，如果我Radio.Button使用Radio.Button ，它将无法正确呈现。

是否可以使用Radio.Button作为Radio.Group以外的结构中的独立组件？

-编辑-

因此可以直接使用Radio.Group并将其嵌套。 我从下面的代码开始，因此将其发布到此处以进行说明。

import React from "react";
import { Radio } from "antd";

export class TestForm extends React.Component {
  public state = {
    level1: null,
    level2: null
  };

  private handleChange = (level: "level1" | "level2", value: any) => {
    console.log("handleChange", level, value);
    this.setState(state => ({ ...state, [level]: value }));
  };

  return (
      <Radio.Group
        onChange={evt => this.handleChange("level1", evt.target.value)}
        value={this.state.level1}
      >
        <Radio style={radioStyle} value={"a"}>
          Option A
        </Radio>
        <Radio style={radioStyle} value={"b"}>
          Option B
        </Radio>
        <Radio style={radioStyle} value={"c"}>
          Option C
        </Radio>
        {this.state.level1 === "c" ? (
          <Radio.Group
            onChange={evt => this.handleChange("level2", evt.target.value)}
            value={this.state.level2}
            defaultValue="c1"
          >
            <Radio style={radioStyle} value={"c1"}>
              Option C1
            </Radio>
            <Radio style={radioStyle} value={"c2"}>
              Option C2
            </Radio>

            <Radio style={radioStyle} value={"c3"}>
              Option C3
            </Radio>
          </Radio.Group>
        ) : null}

        <Radio style={radioStyle} value={"d"}>
          Option D
        </Radio>
      </Radio.Group>
    );
  }
}

Answer 1

Radio.Group和Radio.Button仅仅是一种实现Button.Group ， Button

通过说“ Radio.Button作为独立组件”，我假设您想将其用作单个分组的单选按钮。

在这种情况下，它只是一个Button组件，请参考Button，Button.Group 。

export default function App() {
  return (
    <FlexBox>
      <Radio.Group>
        <Radio.Button value="a">Hangzhou</Radio.Button>
      </Radio.Group>
      <Button>Hangzhou</Button>
    </FlexBox>
  );
}