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

Question

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

这是自定义字段代码：

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 以便进行验证？

标签： javascriptreactjsjsonschemareact-jsonschema-forms

Answer 1

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

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

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