Как я могу добиться, чтобы все флажки в jsonschema были включены после того, как я установил переключатель?

Question

Окей. У меня есть 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

Чтобы изменить выбранные значения по умолчанию, вам необходимо использовать свойство onChange формы (https://react-jsonschema-form.readthedocs.io/en/latest/) и обработать эту логику на твой собственный. Таким образом, вы можете проверить, был ли переключатель переключен на 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, потому что состояние пользовательского интерфейса флажков не обновляется в правильном жизненном цикле или что-то в этом роде. Состояние обновляется правильно, но я не могу отключить все / переключить все, чтобы произошло правильное состояние, а скорее следующий переключатель... Как при переходе от "ДА" -> "НЕТ" -> "ДА" "они все выключаются, а затем, переходя от" ДА "->" НЕТ ", они снова включаются...