时间戳

首页 > 解决方案 > 如何使用 react-jsonschema-forms 创建一个典型的国家/省（或州）依赖项下拉列表？

reactjs - 如何使用 react-jsonschema-forms 创建一个典型的国家/省（或州）依赖项下拉列表？

问题描述

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

到目前为止，我想出了这个：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"
    }
  }
}

它基本上可以呈现国家下拉列表和州/省下拉列表。选择国家/地区时，相应的州/省下拉列表会使用新的枚举值集正确更新。

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

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

但当然想法是将“国家”和“省”作为两个不同的表单字段提交，而无需包装。

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

也许必须编写自定义小部件？（如果可能的话，我想避免这种情况）

提前致谢 ！

标签： reactjsjsonschemareact-jsonschema-forms

解决方案

玩了一会儿之后，似乎我找到了解决方案。一个完全满足需要的正确模式是这个：

{
  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"]
            }
          }
        }
      ]
    }
  }
}

并且上面的代码框示例已更新以反映此更改。很高兴知道这种情况可以使用 JSON 模式来实现！

推荐阅读