在 Formik 中设置单选按钮组的初始值

Question

我正在使用名为 Formik (2.1.5) 的最新版本的 React 表单库。

非常好，但我在初始加载时遇到单选按钮组问题。

当我第一次加载表单时，我设置了一堆初始值。

我可以在执行 console.log 时看到它们，所有数据都在那里。

我的输入字段和文本字段完美地加载了初始值。

但是我的单选按钮组没有显示应该选择哪个单选按钮。

这是我的单选按钮组代码：

<label htmlFor="radioGroup" style={{ display: "block" }}>
    Character Race
</label>
<label>
    <Field type="radio" name="charRace" value="1" />
    Human
</label>
<label>
    <Field type="radio" name="charRace" value="2" />
    Elf
</label>
<label>
    <Field type="radio" name="charRace" value="3" />
    Dwarf
</label>

当表单加载时，这里是初始值：

<Formik
    initialValues={{
        charId: id,
        charName: name,
        charClass: class,
        charRace: race
        charAge: age,
        charRegion: region
    }}

现在加载表单时，charId、charName、charClass、charAge 和 charRegion 的字段都已正确填写。

当我对值执行 console.log 时，我看到了所有值...例如：

charId: 3728,
charName:  Jeriod,
charClass: Wizard,
charRace: 1,
charAge:  34,
charRegion: North

但我不知道如何让 charRace 单选按钮组选中正确的单选按钮。它们总是未选中。

如有帮助，将不胜感激！

Answer 1

charRace 初始值必须是字符串。你可以在这里测试

https://codesandbox.io/s/trusting-hofstadter-hihhj

<Formik
    initialValues={{
        charId: id,
        charName: name,
        charClass: class,
        charRace: String(race),
        charAge: age,
        charRegion: region
    }}

Answer 2

不确定采用这种策略是否正确..

我将“checked”属性添加到我想要预 select 的单选按钮。仅在 Formik 中提及 initialValues 对我不起作用。

在 Formik 中设置单选按钮组的初始值

Setting the initial value for a radio button group in Formik

reactjs

formik