在自定义字段中验证react-jsonschema-form中的布尔字段

{
  "type": "object",
  "properties": {
    "myBooleanField": {
      "type": "boolean",
      "enum": [true, false]
    }
  }
}

{
  "type": "object",
  "properties": {
    "myBooleanField": {
      "type": "boolean",
      "enum": [true, false],
      "ui:field": "myCustomField",
      "ui:validations": [
        {
          "function": "validateBooleanField"
        }
      ]
    }
  }
}

import React from 'react';
import Form from 'react-jsonschema-form';

const MyCustomField = (props) => {
  const { id, value, onChange, onBlur, onFocus, options, schema } = props;

  const validateBooleanField = (value) => {
    if (value !== true && value !== false) {
      return 'Invalid boolean value';
    }
  };

  return (
    <div>
      <input
        id={id}
        type="checkbox"
        checked={value}
        onChange={(event) => onChange(event.target.checked)}
        onBlur={onBlur}
        onFocus={onFocus}
        {...options}
      />
      <label htmlFor={id}>{schema.title}</label>
      {props.error && <p className="error">{props.error}</p>}
    </div>
  );
};

const schema = {
  type: 'object',
  properties: {
    myBooleanField: {
      type: 'boolean',
      enum: [true, false],
      'ui:field': 'myCustomField',
      'ui:validations': [
        {
          function: 'validateBooleanField',
        },
      ],
    },
  },
};

const uiSchema = {};

const formData = {};

const MyForm = () => {
  return (
    <Form
      schema={schema}
      uiSchema={uiSchema}
      formData={formData}
      fields={{ myCustomField: MyCustomField }}
    />
  );
};

export default MyForm;