在自定义字段中验证react-jonschema形式的Boolen字段

Question

我正在使用react jsonschema表单在react中构建一个多步骤表单。其中一个要求是对布尔字段使用材质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"
}

ui架构：

{
"ui:field" : "BToggle"
}

字段：

{
BToggle : BooleanToggle
}

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

Answer 1

在propsBooleanToggle(props:any(中有一个onChange属性

在处理程序中，只需调用Change(value(即可从Data 写入

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