我使用的是最新版本的react表单库Formik(2.1.5)。
这是相当不错的,但我有一个单选按钮组的问题,在初始加载。
当我第一次加载表单时,我设置了一堆初始值。
我可以看到他们当我做一个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单选按钮组选中正确的单选按钮,它们总是未选中。
任何帮助都会受到欢迎,谢谢!
3条答案
按热度按时间6l7fqoea1#
charRace
初始值必须是字符串,可以在这里测试https://codesandbox.io/s/trusting-hofstadter-hihhj
字符串
qlckcl4x2#
我不确定这是否是正确的策略。
我给我想预选的单选按钮添加了一个“checked”属性。在Formik中单独在initialValues中提到对我来说不起作用。
xzv2uavs3#
我会这样做
1.在主组件(Formik Form或Wrapper)中,管理初始值的状态
1.在你获取了你的数据之后,用这个新获取的数据更新初始状态。当然要确保初始/获取的数据之间的数据结构是相同的
1.设置初始值(状态值)
1.为你的Radio,RadioGroup创建一个Wrapper组件--这对可重用性很有好处
1.在这个新的组件 Package 器中,导入useFormikContext钩子并点击values和setFieldValue
1.然后可以设置checked属性,如下面的代码所示,然后在主Formik窗体中使用此组件
1.在formik中使用可重复使用的RadioWrapper,如下所示
//子组件
function RadioWrapper({ name,label,legend,options,. rest }){ const { setFieldValue,values } = useFormikContext(); //为您的数据添加正确的类型const [field,Meta] = useField(name);
字符串
下面的主要组成部分
型