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

o2gm4chl  于 2023-11-18  发布在  React
关注(0)|答案(3)|浏览(140)

我使用的是最新版本的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单选按钮组选中正确的单选按钮,它们总是未选中。
任何帮助都会受到欢迎,谢谢!

6l7fqoea

6l7fqoea1#

charRace初始值必须是字符串,可以在这里测试
https://codesandbox.io/s/trusting-hofstadter-hihhj

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

字符串

qlckcl4x

qlckcl4x2#

我不确定这是否是正确的策略。
我给我想预选的单选按钮添加了一个“checked”属性。在Formik中单独在initialValues中提到对我来说不起作用。

xzv2uavs

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);

const handlgeChane = (evt: ChangeEvent<HTMLInputElement>) => {
             const { value } = evt.target;
             setFieldValue(name, value);
         };
       const configRadio = {
      ...field,
      ...rest,
    };

    // optional settings/configurations
    const configFormControl = { error: false };

    if (meta && meta.touched && meta.error) {
     configFormControl.error = true;
    }

   return (
     <FormControl>
       <FormLabel>{legend}</FormLabel>
       <RadioGroup onChange={handlgeChane}>
         <div style={grid === "col" ? null : colRadioGrpStyle}>
           {options.map((option) => {
             return (
               <FormControlLabel
                 {...configRadio}
                 key={option.key}
                 value={option.value}
                 control={<Radio />}
                 label={option.key}
                 checked={
                   values && option.value === values[name].value ||
                   field.value === option.value
                 }
               />
             );
           })}
         </div>
        // create configObj or pass in props as needed
           </RadioGroup {...configObj}> 
           <ErrorMessage name={name} component={ErrorText} />
         </FormControl>
       );
     })

    export default RadioWrapper;

字符串
下面的主要组成部分

const MyForm = () => {
          const = someInitialValue
          const [initialValues, setInitialVaules] = useState(someInitialValue)
          
          useEffect(() => {
             const getData = async ()=> {
              // const {data } = await axios.get(.....)
              setInitialValues(data)
             }
           
             getData()
        
          }, [])
           
          return (
            <Formik
                   initialValues={initialValues}
                   onSubmit={onSend}
                   validationSchema={validationSchema}
                   enableReinitialize={true}
                >
                   {({ setFieldValue, values }) => (
                     <Form className="......">
                        <RadioWrapper name="name" options={options} legend="something" label="some label"/>
                     </Form>
                   )}
                </Formik>
                )
        
        }
        
   export default MyForm

相关问题