Formik

Question

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

Answer 1

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

但是对于那些有兴趣的人，我设法通过使用 "radio" 按钮以外的东西来设置 "correct answer" 标志的值来解决这个问题，我只是用一个按钮来将正确的表单值设置为 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

Formik - 带无线电输入的 FieldArray

Formik - FieldArray with radio input

radio-button

reactjs

next.js