时间戳

首页 > 解决方案 > 如何动态更新复选框的 react-json-schema 表单

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

问题描述

我有这样的代码

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 etc)。假设我有后端，并且后端是生成状态。我刚得到状态，需要更新 level2 复选框上的“项目：”。

所以我的问题是当我选择 level1 时如何动态更改 level2 上的“项目：”在我的情况下，我想选择 CFO，level2 复选框将显示三个职位（会计经理、财务经理、欺诈经理等) 在 CFO 部门，然后我只选择会计经理和欺诈经理。

谢谢

标签： javascriptarraysreactjsarraylistreact-jsonschema-forms

解决方案

个人输入

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

  <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'
    }
  }

表单处理

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

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

推荐阅读