求助：使用react-jsonschema-form渲染自定义单选按钮组失败

问题根源 #

你的代码存在两个核心问题：

1. 自定义CustomRadio组件仅渲染了单个单选按钮，没有遍历oneOf定义的所有选项
2. 未为单选按钮添加对应的标签文本，且checked状态判断、值类型转换逻辑有误

修正后的代码 #

1. 自定义单选按钮组件（核心修正）

const CustomRadio = (props: WidgetProps) => {
  // 从schema的oneOf中提取所有选项的标签和值
  const options = props.schema.oneOf?.map((subSchema) => ({
    label: subSchema.title,
    value: subSchema.enum?.[0],
  })) || [];

  return (
    <div style={{ display: "flex", gap: "16px", alignItems: "center" }}>
      {options.map((option, index) => {
        const buttonId = `${props.id}-${index}`;
        return (
          <label key={buttonId} htmlFor={buttonId} style={{ display: "flex", alignItems: "center", gap: "4px" }}>
            <RadioButton
              id={buttonId}
              name={props.id} // 同一组单选按钮需保持name一致
              value={option.value}
              onChange={(event) => props.onChange(Number(event.target.value))} // 转换为数字匹配schema类型
              checked={props.value === option.value} // 根据当前字段值判断选中状态
              disabled={props.disabled}
            />
            {option.label} {/* 添加选项标签文本 */}
          </label>
        );
      })}
    </div>
  );
};

2. 确保自定义组件已注册到widgets对象

// 注册自定义widget
const widgets = {
  radio: CustomRadio,
};

关键修正点说明 #

• 遍历选项：通过props.schema.oneOf获取所有定义的选项，循环渲染每个单选按钮
• 组名一致性：所有单选按钮使用相同的name属性，确保互斥选择
• 值类型转换：将event.target.value（字符串）转为数字，匹配schema的number类型
• 选中状态判断：通过props.value === option.value判断当前按钮是否选中，而非依赖defaultChecked
• 添加标签：为每个单选按钮关联对应的标签文本，解决"空按钮"问题

验证 #

修正后，表单会渲染三个带标签的单选按钮，对应One、2、Num 3选项，默认选中值为2，选中切换时能正确更新表单数据。

内容的提问来源于stack exchange，提问作者Reuven