时间戳

首页 > 解决方案 > Formik - 带无线电输入的 FieldArray

reactjs - Formik - 带无线电输入的 FieldArray

问题描述

我正在使用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

标签： reactjsradio-buttonnext.jsformik

解决方案

如果有人想向我们展示如何使用，Radibuttons请继续，我会接受您的答案作为正确答案。

但是对于那些感兴趣的人，我设法通过使用“单选”按钮以外的东西来设置“正确答案”标志的值来解决这个问题，我只是使用一个按钮来设置正确表单值的值并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

推荐阅读