Formik - FieldArray с радиовходом - PullRequest
Новая
       8

Formik - FieldArray с радиовходом

1 голос
/ 26 января 2020

Я использую formik 1.5.8 версию прямо перед версией 2, и я пытаюсь использовать <FieldArray /> для создания нескольких вложенных вариантов для пользователя (вопросы и ответы MCQ).

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

Вложенный <FieldArray /> генерирует штраф, но, как вы знаете, чтобы сделать Radio Button работа, вы должны присвоить им одно и то же имя с разными значениями, поэтому в этом сценарии я даю им имя первого варианта ответа, поэтому, когда я изменяю их, только первый вариант ответа меняет свое значение.

Как я могу сделать такую ​​вещь, когда выбранная радиокнопка меняет правильное значение поля на true, а остальные на false?

Вот Codesandbox для демонстрации .. .

https://codesandbox.io/s/formik-yup-fieldarray-with-radio-inputs-r5yxl

1 Ответ

1 голос
/ 26 января 2020

Если кто-то захочет показать нам, как это сделать, используя Radibuttons, пожалуйста, go впереди, и я приму ваш ответ как правильный.

Но для тех из вас, кто заинтересован, Мне удалось решить эту проблему с помощью чего-то другого, кроме кнопок «радио», чтобы установить значение флага «правильный ответ», я просто использовал кнопку, чтобы установить значение правильного значения формы на true и в то же время установите значение других связанных входов на false.

вот кнопка, которую я использовал ... 

<button
    type="button"
    className={ values.payload[index].answers[index2].correct
            ? "active"
            : ""}
    onClick={() => {
        values.payload[index].answers.map(
            (tem3, index3) => {
                setFieldValue(`payload[${index}].answers[${index3}].correct`,false);
            }
        );
        setFieldValue(flagName, true);
    }}
>
    {values.payload[index].answers[index2].correct
        ? "Correct Answer"
        : "Mark As Correct"
    }
</button>

Я также обновил пример Codesandbox здесь ...

https://codesandbox.io/s/formik-yup-fieldarray-with-buttons-instead-of-radio-inputs-0ek59

...