在Formik中设置单选按钮组的初始值 [英] Setting the initial value for a radio button group in Formik

问题描述

我使用的是名为Formik(2.1.5)的最新版本的Reaction表单库。

它相当不错，但我在初始加载时遇到了单选按钮组的问题。

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

当我执行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单选按钮组选中正确的单选按钮。它们始终处于未选中状态。

如有任何帮助，我们将不胜感激！

推荐答案

charRace初始值必须是字符串。您可以在此处测试

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

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

这篇关于在Formik中设置单选按钮组的初始值的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！