0

好的。我有一个如下的 jsonschema。当单选按钮“YES”被标记时，我试图让所有项目（颜色 - 复选框）默认单击。相反，如果单击“否”按钮，则所有颜色都将被取消选中。

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 有效，但它不起作用。

有人可以帮我吗？

4

2 回答 2

0

目前看来不可能

{
  "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 有独立的组件，它会选择默认的。

于 2019-02-01T06:28:35.773 回答
0

要更改默认选定值，您需要使用表单的“onChange”属性（https://react-jsonschema-form.readthedocs.io/en/latest/#form-data-changes）并处理该逻辑你自己。因此，您可以检查单选按钮是否切换为 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" 他们会重新打开......

于 2019-05-12T23:02:13.947 回答