Formik - 带无线电输入的 FieldArray答案

【问题标题】：Formik - FieldArray with radio inputFormik - 带无线电输入的 FieldArray
【发布时间】：2020-01-26 11:28:28
【问题描述】：

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

【问题讨论】：

标签： reactjs radio-button next.js formik

【解决方案1】：

如果有人想向我们展示如何使用 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

【讨论】：