Как динамически обновить форму реагирующей json схемы для флажков - PullRequest
Новая
       18

Как динамически обновить форму реагирующей json схемы для флажков

1 голос
/ 07 марта 2020

У меня есть что-то вроде этого 

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"));

, тогда у меня есть несколько логик c, например, level1 (выберите раскрывающийся список) будет показывать позицию правления (CEO, CFO, CMO и CTO), если мы выберем CFO level2 (флажки) изменится на (Бухгалтерский учет, финансовый менеджер, Fraud Manager), если мы выберем CTO level2, изменится на (IT Manager, Infra Manager et c). скажем, у меня есть бэкэнд, и бэкэнд был создан, чтобы заявить. Я просто получаю состояние и мне нужно обновить "items:" на флажках уровня 2.

Поэтому мой вопрос заключается в том, как динамически изменять "items:" на уровне 2 при выборе уровня 1. В моем случае я хочу чтобы выбрать CFO, флажок level2 покажет три позиции (Менеджер по бухгалтерии, Финансовый менеджер, Менеджер по мошенничеству и т. д. c) в отделе Финансового директора, затем я выберу только Менеджер по бухгалтерскому учету и Менеджер по мошенничеству.

Спасибо

1 Ответ

1 голос
/ 07 марта 2020

Индивидуальный вход

Для достижения этого эффекта условного поля обычно это можно сделать через отдельные входы. 

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

Предполагая, что оба входа управляются через value и onChange, вы можете подключиться с собственным логом c как 

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

Обработка форм

Выше предполагается, что у вас есть индивидуальный контроль. Но если у вас есть Form или useForm, вы все равно можете сделать это, если у вас есть доступ к формам values и setValues. 

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