如何动态更新复选框的 react-json-schema 表单

Posted 2023-02-22

【中文标题】如何动态更新复选框的 react-json-schema 表单

【英文标题】：How to dynamically update react-json-schema form for checkboxes

【发布时间】：2020-06-20 01:08:59

【问题描述】：

我有类似这样的代码

const Jschema = 
    "type": "object",
    "title": "Create Form",
    "required": [
        "level1",
        "level2"
    ],
    "properties": 
        "level1": 
            "type": "string",
            "title": "Level 1",
            "default": ""
        ,
        "level2": 
          "type": "array",
          "items": 
              "enum": [
                  "no position"
              ],
              "type": "string"
          ,
          "title": "Level 2",
          "uniqueItems": true
        ,
    ,
    "description": "Create Form"
  

  const uiSchema = 
    "ui:order": [
        "level1",
        "level2"
    ],

    "level1": 
        "ui:title": "Rank Level 1",
        "ui:widget": "dropdown",
        "ui:placeholder": "Please select rank level 1"
    ,
    "level2": 
      "ui:title": "Rank Level 2",
      "ui:widget": "checkboxes",
      "ui:placeholder": "Please select rank level 2"
    
  

  const dropDownList = 
    level1: 
      url: '/v2/level1_rank',
      name: 'level1',
      accessorName: 'level1_name',
      accessorValue: 'level1_value'
    
  

然后将生成于

render((
    <Form schema=schema
          uiSchema=uiSchema
          formData=formData />
  ), document.getElementById("app"));

然后我有一些这样的逻辑，level1（选择下拉菜单）将显示董事会的职位（CEO、CFO、CMO 和 CTO） 如果我们选择 CFO level2（复选框）将更改为（会计经理、财务经理、欺诈经理），如果我们选择 CTO level2 将更改为（IT Manager、Infra Manager 等）。假设我有后端，并且后端是生成状态。我刚得到状态，需要更新 level2 复选框上的“items:”。

所以我的问题是当我选择 level1 时如何动态更改 level2 上的“items:” 就我而言，我想选择 CFO，level2 复选框将显示 CFO 部门的三个职位（会计经理、财务经理、欺诈经理等），然后我只选择会计经理和欺诈经理。

谢谢

【问题讨论】：

你找到解决这个@Kyoo的方法了吗

【参考方案1】：

个人输入

为了实现这种条件场效应，通常可以通过单独的输入来完成。

  <Input name="input1" value=value1 onChange=onChange1 />
  <Input name="input2" value=value2 onChange=onChange2 />

假设两个输入都通过value 和onChange 控制，那么你可以用你自己的逻辑来连接

  const onChange1 = e => 
    if (e.target.value === '1') 
      value2 = '2'
    
  

表单处理

以上假设您拥有个人控制权。但是如果有Form 或useForm，如果您可以访问values 和setValues 表单，您仍然可以实现它。

  useEffect(() => 
    if (values.input1 === 1) 
      setValues( input2: 2 )
    
  , [values])

【讨论】：

这意味着我们没有使用

您可以阅读此Form 的文档以了解如何设置（或提供）value 和setValues。因为无论谁编写该库，他们都必须公开这两个接口。

文档仅通过硬编码显示 ``` "multipleChoicesList": "type": "array", "title": "A multiple selection list", "items": "type": "string", "enum": [ "foo", "bar", "fuzz", "qux" ] , "uniqueItems": true ```这就是我困惑的原因:)

我看到你有formData，那是什么？这对我来说可能是values。这个组件的名称是什么Form 来自哪个库？

formData 是 react-json-schema 的标准