在react-jsonschema-form中，如何用uiSchema将所有布尔字段设为单选按钮？

要实现这个需求，有几种实用的方式，根据你的表单规模和灵活性需求来选：

1. 动态生成uiSchema（推荐，适配多字段场景） #

如果你的表单里有大量布尔字段，手动逐个配置太麻烦，你可以遍历你的schema，自动为所有type: "boolean"的字段设置单选按钮widget：

示例代码 #

先定义你的表单schema：

const schema = {
  type: "object",
  properties: {
    acceptTerms: { type: "boolean", title: "接受服务条款" },
    receiveNewsletter: { type: "boolean", title: "订阅新闻推送" },
    enableNotifications: { type: "boolean", title: "启用通知提醒" }
  }
};

然后生成对应的uiSchema：

// 遍历schema的properties，给所有布尔字段加上单选按钮配置
const uiSchema = Object.fromEntries(
  Object.entries(schema.properties).map(([fieldKey, fieldProps]) => {
    if (fieldProps.type === "boolean") {
      return [fieldKey, { "ui:widget": "radio" }];
    }
    // 非布尔字段保持默认配置
    return [fieldKey, {}];
  })
);

这样所有布尔字段都会自动渲染成单选按钮，默认会显示"是"/"否"（或英文的"True"/"False"），你还可以通过ui:options自定义选项文本和排列方式。

2. 全局替换布尔类型的默认Widget（最省心） #

如果你希望整个项目里的所有布尔字段默认都用单选按钮，不用每次配置uiSchema，你可以自定义一个布尔Widget，然后通过Form组件的widgets属性全局替换：

import { Form } from "react-jsonschema-form";

// 自定义布尔类型的单选按钮组件
const CustomBooleanRadio = (props) => {
  return (
    <div className="radio-group">
      <label>
        <input
          type="radio"
          name={props.name}
          checked={props.value === true}
          onChange={() => props.onChange(true)}
        />
        同意
      </label>
      <label>
        <input
          type="radio"
          name={props.name}
          checked={props.value === false}
          onChange={() => props.onChange(false)}
        />
        不同意
      </label>
    </div>
  );
};

// 在Form中使用自定义的widgets
<Form
  schema={schema}
  widgets={{ BooleanWidget: CustomBooleanRadio }}
/>

这样不管哪个表单里的布尔字段，都会自动用你这个自定义的单选按钮组件，完全不用管uiSchema。

3. 手动逐个配置（适合少量字段） #

如果你的布尔字段很少，直接在uiSchema里逐个指定就行：

const uiSchema = {
  acceptTerms: { "ui:widget": "radio" },
  receiveNewsletter: { "ui:widget": "radio" }
};

额外优化：自定义选项文本和排列 #

不管用哪种方式，你都可以通过ui:options来调整单选按钮的显示效果：

// 比如给某个字段设置横向排列+自定义文本
const uiSchema = {
  acceptTerms: {
    "ui:widget": "radio",
    "ui:options": {
      inline: true, // 选项横向排列
      labels: ["同意服务条款", "不同意"] // 替换默认的选项文本
    }
  }
};

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