Javascript 使用ant设计的单选组按钮不起作用

我遇到一些单选组按钮问题。有人能帮我解决这个问题吗。（非常感谢您的帮助）

当前问题：无法单击广播组。我不知道我错过了什么

使用的技术：React挂钩、样式化组件和设计 用于单选按钮

RadioGroup.js

import React from "react";
import { Radio } from "antd";
import styled from "styled-components";
import { theme } from "constants/theme";
const { royalBlue, black } = theme.colors;
const { medium } = theme.typography.size;
const { display } = theme.typography.font.family;

const StyledRadioGroup = styled(Radio.Group)`
  width: 100%;
  margin-top: 0.5rem;
  text-align: left;
  .ant-radio-wrapper {
    justify-content: space-between;
    padding: ${(props) => props.padding};
    white-space: break-spaces;
    margin-left: -1.5rem;


    span.ant-radio + * {
      font-family: ${display};
      font-size: ${medium};
      color: ${black};
      letter-spacing: 0;
    }
    .ant-radio-inner {
      border-color: ${royalBlue};
      border-width: 0.2rem;
      width: 2.5rem;
      height: 2.5rem;
      &::after {
        background-color: ${royalBlue};
        top: 0.2rem;
        left: 0.2rem;
      }
    }
  }
`;

const RadioGroup = ({
  options,
  onChange,
  value,
  defaultValue,
  flex,
  padding,
}) => {
  return (
    <StyledRadioGroup
      size="large"
      flex={flex}
      padding={padding}
      onChange={onChange}
      value={value}
      defaultValue={defaultValue}
    >
      {options.map((option, index) => (
        <Radio value={option.stateKey} key={index}>
          {option.value}
        </Radio>
      ))}
    </StyledRadioGroup>
  );
};

export default RadioGroup;

从“React”导入React；
从“antd”导入{Radio}；
从“样式化组件”导入样式化；
从“常量/主题”导入{theme}；
const{royalBlue，black}=theme.colors；
const{medium}=theme.typography.size；
const{display}=theme.typography.font.family；
const StyledRadioGroup=styled（Radio.Group）`
宽度：100%；
边缘顶部：0.5雷姆；
文本对齐：左对齐；
蚂蚁无线电包装器{
证明内容：之间的空间；
填充：${（props）=>props.padding}；
空白：间断空间；
左边距：-1.5雷姆；
span.ant-radio+*{
字体系列：${display}；
字体大小：${medium}；
颜色：${黑色}；
字母间距：0；
}
蚂蚁电台{
边框颜色：${royalBlue}；
边界宽度：0.2rem；
宽度：2.5雷姆；
高度：2.5雷姆；
&：：之后{
背景色：${royalBlue}；
顶部：0.2rem；
左：0.2rem；
}
}
}
`;
常量组=({
选项，
一旦改变，
价值
默认值，
弯曲
衬料
}) => {
返回(
{options.map（（选项，索引）=>(
{option.value}
))}
);
};
导出默认组；

Navigation.js

import React, { useState, useReducer } from "react";
import styled from "styled-components";
import RadioModal from "components/Feedback/RadioModal";
import RadioGroup from "components/Feedback/RadioGroup";

const renderRadioModal = () => {
    const inputLabelsText = [
      {
        stateKey: "age",
        label: "What is your age?",
      },
    ];

    const radioButtonOptions = [
      {
        stateKey: "covidImpact",
        value: "I go to work/school normally",
      },
      {
        stateKey: "covidImpact",
        value: "I am healthy but in a stay-at-home quarantine",
      },
      {
        stateKey: "covidImpact",
        value: "I have mild symptoms but haven't been tested",
      },
      {
        stateKey: "covidImpact",
        value: "I am diagnosed with Covid-19",
      },
    ];

    const RadioGroupWithLabel = withLabel(() => (
      <RadioGroup
        onChange={true}
        options={radioButtonOptions}
        value={true}
        padding="1rem 1rem"
        size="large"
      ></RadioGroup>
    ));

    return (
      <RadioModal
        maskClosable={true}
        closable={true}
        visible={radioModal}
        onClose={() => closeRadioModal()}
        transparent
      >
        <h2 className="title">We are almost done!</h2>
        {inputLabelsText.map((label, index) => (
          <>
            <StyledInput
              key={index}
              label={label.label}
              value={label.stateKey}
              onChange={dispatchAction}
            ></StyledInput>
            <RadioGroupWithLabel label={"How has COVID-19 impacted you?"} />
          </>
        ))}
        <FeedbackSubmitButton
          title="Submit Feedback"
          onClick={closeRadioModal}

        ></FeedbackSubmitButton>
      </RadioModal>
    );
  };

import React，{useState，useReducer}来自“React”；
从“样式化组件”导入样式化；
从“组件/反馈/无线电模态”导入无线电模态；
从“组件/反馈/射线组”导入射线组；
常量renderRadioModal=（）=>{
常量inputLabelsText=[
{
状态键：“年龄”，
标签：“你的年龄是多少？”，
},
];
常数radioButtonOptions=[
{
stateKey：“共变影响”，
价值观：“我正常上班/上学”，
},
{
stateKey：“共变影响”，
价值观：“我很健康，但在家里隔离”，
},
{
stateKey：“共变影响”，
值：“我有轻微症状，但还没有测试”，
},
{
stateKey：“共变影响”，
价值：“我被诊断为新冠病毒-19”，
},
];
常量RadioGroupWithLabel=withLabel（（）=>(
));
返回(
closeRadioModal（）}
透明的
>
我们差不多完成了！
{inputLabelsText.map（（标签，索引）=>(
))}
);
};

您有

onChange={true}

和

value={true}

。您需要正确处理onChange和value。值道具需要与传递到无线电组的选项中的值匹配

您传入的选项应该在结构

[{value，label}，{value，label}]

然后在onChange中，您需要处理该值的设置，并有一个存储位置