Question

Okey。我有一个jsonschema如下。我试图在标记“是”单选按钮时默认单击所有项目（颜色-复选框）。相反，如果单击“否”按钮，则会取消选中所有颜色。

JsonSchema

{
  "title": "Item Type Filtering Form",
  "description": "Form for filtering Item Types according to selected Attribute Values.",
  "type": "object",
  "properties": {
    "colorAll": {
      "type": "boolean",
      "title": "Seat Color All",
      "enum": [
        false,
        true
      ],
      "enumNames": [
        "NO",
        "YES"
      ],
      "default": true
    },
    "colorList": {
      "type": "array",
      "title": "Seat Color",
      "items": {
        "type": "object",
        "enum": [
          {
            "id": 1,
            "label": "RED"
          },
          {
            "id": 2,
            "label": "BLUE"
          },
          {
            "id": 3,
            "label": "GREEN"
          }
        ],
        "enumNames": [
          "RED",
          "BLUE",
          "GREEN"
        ]
      },
      "uniqueItems": true
    }
  }
}

UISchema

{
  "colorAll": {
    "ui:widget": "radio",
    "ui:options": {
      "inline": true
    }
  },
  "colorList": {
    "ui:widget": "checkboxes",
    "ui:options": {
      "inline": true
    }
  }
}

我正在https://mozilla-services.github.io/react-jsonschema-form/#页上进行练习，但是我的尝试都没有按照上面的描述进行操作...

我认为我可以使用“ default：” 关键字将其放入其中，并将所有值放入其中-> JsonSchema已验证，但是没有用。

有人可以帮我吗？

Answer 1

目前看来不可能

{
  "title": "Schema dependencies",
  "description": "These samples are best viewed without live validation.",
  "type": "object",
  "properties": {
    "conditional": {
      "title": "Conditional",
      "$ref": "#/definitions/person"
    }
  },
  "definitions": {
    "person": {
      "title": "Person",
      "type": "object",
      "properties": {
        "colorAll": {
          "type": "string",
          "enum": [
            "No",
            "Yes"
          ],
          "default": "No"
        }
      },
      "required": [
        "colorAll"
      ],
      "dependencies": {
        "colorAll": {
          "oneOf": [
            {
              "properties": {
                "colorAll": {
                  "enum": [
                    "Yes"
                  ]
                },
                "colorList": {
                  "type": "array",
                  "title": "Seat Color",
                  "items": {
                    "type": "string",
                    "enum": [
                      "RED",
                      "BLUE",
                      "GREEN",
                      "Yes Only",
                      "ABC"
                    ]
                  },
                  "default": [
                    "RED",
                    "BLUE",
                    "Yes Only"
                  ],
                  "uniqueItems": true
                }
              }
            },
            {
              "properties": {
                "colorAll": {
                  "enum": [
                    "No"
                  ]
                },
                "colorList": {
                  "type": "array",
                  "title": "Seat Color",
                  "items": {
                    "type": "string",
                    "enum": [
                      "RED",
                      "BLUE",
                      "GREEN"
                    ]
                  },
                  "uniqueItems": true
                }
              }
            }
          ]
        }
      }
    }
  }
}

如果在操场上运行以上命令，则颜色列表会更改，但不会选择默认颜色。但是如果您的colorList具有独立组件，它将选择默认组件。

Answer 2

要更改默认的选定值，您需要使用表单（https://react-jsonschema-form.readthedocs.io/en/latest/#form-data-changes）的“ onChange”属性，并自行处理该逻辑。因此，您可以检查单选按钮是否切换为true或false，如果是，请将colorList设置为

[
    {
        "id": 1,
        "label": "RED"
    },
    {
        "id": 2,
        "label": "BLUE"
    },
    {
        "id": 3,
        "label": "GREEN"
    }
]

分别是

或[]。

请在文档中注意以下警告：
WARNING: If you have situations where your parent component can re-render, make sure you listen to the onChange event and update the data you pass to the formData attribute.

这是我设置的示例代码笔，它管理两个属性：
https://codepen.io/anon/pen/VOjJmY
还要注意，因为实际值是一个对象，所以我认为您必须重用同一对象（因此直接使用schema.properties.colorList.items.enum）。

我认为React JSON Schema Form有一个错误，因为复选框的UI状态无法在正确的生命周期中更新。状态已正确更新，但我无法取消/全部切换在正确状态下发生，而是跟随切换...就像从“是”->“否”->“是“他们全部关闭，然后从“ YES”->“ NO”再次打开...

检查单选按钮后，如何实现启用jsonschema中的所有复选框？

2 个答案: