如何使用 react-jsonschema-forms 创建典型的 country/province（或状态）依赖项下拉列表？

Question

我正在尝试编写一个显示两个下拉菜单的示例：一个用于国家/地区，一个用于相关 states/provinces。当您在第一个下拉菜单中选择一个国家时，第二个下拉菜单的值应更新为仅显示所选国家/地区的 provinces/states。通常这是使用某种 Ajax 调用来完成的，但在这种情况下，要求是纯粹使用 react-jsonschema-form 来尝试它。这真的可能吗？我已经看到几个使用依赖项/引用的示例，但是 none 解决了这个特定的场景。

到目前为止我想到了这个：https://codesandbox.io/s/fervent-cherry-lokjk?file=/src/App.js

{
  "definitions": {
    "Countries": {
      "title": "Country",
      "type": "object",
      "properties": {
          "country": {
              "type": "string",
              "enum": [
                "CANADA",
                "USA",
                "MEXICO"
              ]              
          }
      },
      "dependencies": {
        "country": {
          "oneOf": [
           {
              "properties": {
                "country": {
                  "enum": [
                    "CANADA"
                  ]
                },
                "province": {
                  "type": "string",
                  "title": "Province",
                  "enum": [
                    "AB",
                    "BC",
                    "MB"
                  ]                  
                }
              }
            },
            {
              "properties": {
                "country": {
                  "enum": [
                    "USA"
                  ]
                },
                "province": {
                  "type": "string",
                  "title": "State",
                  "enum": [
                    "AL",
                    "AK",
                    "AR"
                  ]                  
                }
              }
            },
            {
              "properties": {
                "country": {
                  "enum": [
                    "MEXICO"
                  ]
                },
                "province": {
                  "type": "string",
                  "title": "State",
                  "enum": [
                    "AGS",
                    "BC",
                    "BCS"
                  ]                  
                }
              }
            }
          ]
        }
      }
    }
  },
  "title": "Demo for countries",
  "type": "object",
  "properties": {
      "currentCountry": {
      "$ref": "#/definitions/Countries",
      "title": "Select country / province / state"
    }
  }
}

基本上可以呈现国家/地区下拉菜单和 State/Province 下拉菜单。选择国家/地区时，相应的 state/province 下拉列表会使用新的一组枚举值正确更新。

但是，使用这种方法，表单将提交一个名为“currentCountry”的字段，其中包含国家和省份两个属性

currentCountry: { country: "USA" , province: "AL" }

当然，我们的想法是将“国家”和“省”作为两个不同的表单字段提交，而不需要换行。

那么，有人知道如何实现这个典型用例吗？是否有使用 JSON 模式的最佳方法？

可能需要编写自定义小部件的代码？（我想尽可能避免这种情况）

提前致谢！

Answer 1

玩多了，似乎找到了解决办法。一个正确的模式完全满足需要的是这个：

{
  title: "Demo for countries",
  type: "object",
  properties: {
    country: {
      type: "string",
      title: "Country",
      enum: ["CANADA", "USA", "MEXICO"]
    }
  },
  dependencies: {
    country: {
      oneOf: [
        {
          properties: {
            country: {
              enum: ["CANADA"]
            },
            province: {
              type: "string",
              title: "Province",
              enum: ["ALBERTA", "BRITISH COLUMBIA", "MANITOBA"]
            }
          }
        },
        {
          properties: {
            country: {
              enum: ["USA"]
            },
            province: {
              type: "string",
              title: "State",
              enum: ["ALABAMA", "OREGON", "ARKANSAS"]
            }
          }
        },
        {
          properties: {
            country: {
              enum: ["MEXICO"]
            },
            province: {
              type: "string",
              title: "State",
              enum: ["JALISCO", "BAJA CALIFORNIA", "CHIAPAS"]
            }
          }
        }
      ]
    }
  }
}

并且上面的 codesandbox 示例已更新以反映此更改。很高兴知道这种情况可以通过 JSON 模式实现！

如何使用 react-jsonschema-forms 创建典型的 country/province（或状态）依赖项下拉列表？

How to create a typical country/province (or state) dependency dropdowns with react-jsonschema-forms?

jsonschema

reactjs

react-jsonschema-forms