Синхронизация значений из модальных в Formik в React JS

#javascript #reactjs #formik

#javascript #reactjs #formik

Вопрос:

Я работаю над формой регистрации пользователя, используя formik в react js. структура пользователя будет выглядеть следующим образом

 user : {
          name:'',
          email:'',
          apps:[{
            name:'',
            role:'',
            permissions: [{
              service:'*',
              access:'R'
            }]
          }]
        }
 

пользователь может иметь доступ к нескольким приложениям, и у каждого приложения может быть список разрешений. Вышеуказанный пользователь, имеющий доступ к одному приложению, которое имеет одно разрешение. Я пытаюсь показать разрешения в модальном, в модальном мы должны перечислить службы и их доступ, этот доступ будет представлен в раскрывающемся списке и может быть изменен, поэтому, если доступ изменен, мы должны синхронизировать этот обновленный доступ с исходным пользовательским разрешением. изначально модальное тело будет выглядеть так, как показано ниже

Обслуживание доступ
* R

Теперь мы изменили доступ к W, как показано ниже

Обслуживание доступ
* W

итак, когда мы отправляем исходную форму пользователя, доступ должен быть обновлен, и, наконец, пользователь должен выглядеть так, как показано ниже

 user : {
          name:'enterd_name',
          email:'enterd_email',
          apps:[{
            name:'selected_appname',
            role:'selected_role',
            permissions: [{
              service:'*',
              access:'W'
            }]
          }]
        }
 

Я попробовал пример Codesandbox здесь… https://codesandbox.io/s/react-modal-within-formik-0hpqb но безуспешно. Любые предложения были бы очень полезны. Спасибо.

Ответ №1:

Извините, если я не правильно понял ваш вопрос, но из того, что я понял, вы хотите обновить состояние с помощью значений PermissionModal,

Если это так, вы всегда можете использовать setFieldValue prop, доступ к нему осуществляется так же, как и onSubmit, для изменения состояния formik.

https://formik.org/docs/api/formik#setfieldvalue-field-string-value-any-shouldvalidate-boolean—void

итак, скажем, если вы хотите, чтобы состояние обновлялось при модальном закрытии, возможно, вы можете вызвать setFieldValue новое состояние.

как и в вашем примере, если вы хотите обновить имя, вы можете сделать что-то вроде setFieldValue("user.name", "world");