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

Question

It looks like antd does not support nested radio button groups, so I will have to structure the input elements myself. However, if I use the Radio.Button by itself it doesn't render correctly.

Is there a way to use Radio.Button as a standalone component in a structure other than Radio.Group?

--- edit ---

So it is possible to use the Radio.Group directly and nest it. I have a start with the code below, so I'll post it here to for illustration.

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 and Radio.Button is just an implementation of Button.Group , Button

By saying "Radio.Button as a standalone component" I assume you want to use it as a single grouped radio button.

In this case, is just a Button component, refer to Button, Button.Group .

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