如何在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>
  );
}