在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屋！