Chakra UI自定义单选按钮单击时不会发生任何事情

import { Radio, RadioGroup } from "@chakra-ui/react";

function MyComponent() {
  const handleChange = (value) => {
    // 处理单选按钮点击事件
    console.log("选中的值：", value);
  };

  return (
    <RadioGroup onChange={handleChange}>
      <Radio value="option1">选项1</Radio>
      <Radio value="option2">选项2</Radio>
      <Radio value="option3">选项3</Radio>
    </RadioGroup>
  );
}

import { useState } from "react";
import { Radio, RadioGroup } from "@chakra-ui/react";

function MyComponent() {
  const [selectedValue, setSelectedValue] = useState("");

  const handleChange = (value) => {
    // 更新选中的值
    setSelectedValue(value);
  };

  return (
    <RadioGroup value={selectedValue} onChange={handleChange}>
      <Radio value="option1">选项1</Radio>
      <Radio value="option2">选项2</Radio>
      <Radio value="option3">选项3</Radio>
    </RadioGroup>
  );
}

import { Radio, RadioGroup, extendTheme } from "@chakra-ui/react";

const theme = extendTheme({
  components: {
    Radio: {
      baseStyle: {
        // 自定义样式
      },
    },
  },
});

function MyComponent() {
  return (
    <RadioGroup theme={theme}>
      <Radio value="option1">选项1</Radio>
      <Radio value="option2">选项2</Radio>
      <Radio value="option3">选项3</Radio>
    </RadioGroup>
  );
}