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

Question

我正在使用react-jsonschema-form 在 React 中构建多步骤表单。要求之一是使用material-ui 切换按钮作为布尔字段。我能够创建一个自定义字段，但不确定在这种情况下验证是如何工作的。即使选择了一个值，我也会收到布尔值要求的验证消息。

这是自定义字段代码：

export default function BooleanToggle(props: any) {
  const [booleanResponse, setBoolenResponse] = useState(null);

  const handleSelection = (event: any, response: any) => {
    setBoolenResponse(response);
  }

  return (
    <div>
      <ToggleButtonGroup exclusive value={booleanResponse} onChange={handleSelection}>
        <ToggleButton value={true} aria-label="Yes">
          <div>Yes</div>
        </ToggleButton>
        <ToggleButton value={false} aria-label="No">
          <div>No</div>
        </ToggleButton>
      </ToggleButtonGroup>
    </div>
  );
}

架构：

{
   "title":"Test title",
   "type": "boolean"
}

uiSchema：

{
    "ui:field" : "BToggle"
}

字段：

{
    BToggle : BooleanToggle
}

如何将此字段的值添加到 formData 以便进行验证？

Answer 1

props中有一个onChange属性 BooleanToggle(props: any)

在您的处理程序中只需调用 onChange(value) 来写入 fromData

const {onChange} = props;
const handleSelection = (event: any, response: any) => {
    setBoolenResponse(response);
    onChange(response); // your value for formData
  }