如何在 Formik 数据的 initialValues 中保存键入的值？答案

【问题标题】：How to save typed values inside the initialValues of Formik data?如何在 Formik 数据的 initialValues 中保存键入的值？
【发布时间】：2021-03-02 12:58:35
【问题描述】：

我使用 Formik 创建表单：

const initialValues = {
        groupName: '',
        description: '',
        testGroup: 0
    };

return (
        
        <Formik initialValues={initialValues} >
            
            {(formik) => {
                
                const { setValues } = formik;
                
                const onRadioGroupetestChange = (input) => {
                    setValues({
                        ...initialValues,
                        testGroup: Number(input)
                    });
                };
                
                return (
                    
                    <Form>
                        
                        <FormikControl
                            control="input"
                            label={_getText("group.name")}
                            name="groupName"
                            placeholder={_getText("placeholder.group.name")}
                        />

                        <FormikControl
                            control="textarea"
                            label={_getText("description")}
                            name="description"
                            placeholder={_getText("placeholder.group.descr")}
                        />

                        <FormikControl
                            formik={formik}
                            control="radio"
                            onChange={onRadioGroupetestChange}
                            initialValue={initialValues.testGroup}
                            name="testGroup"
                            label={_getText('group.test')}
                            options={radioDataGroupTest}
                        />

                        <Flex
                            flexWidth={1}
                            alignItems="center"
                            justifyContent="center"
                            margin="2rem 0 0 0"
                        >
                            <Flex margin="0 0.8rem 0 0">
                                <Button
                                    variant="line"
                                    text="Cancel"
                                    type="reset"
                                    onClick={closeModal}
                                />
                            </Flex>
                            <Flex margin="0 0 0 0.8rem">
                                <Button text="Submit" type="submit" />
                            </Flex>
                        </Flex>
                    </Form>
                );
            }}
        </Formik>

带有“testGroup”属性的 FormikControl 组件呈现两个单选按钮。

在运行时，当我单击单选按钮的未选中按钮时，表单的所有字段都会被清除。那么如何保存我在组件组名和描述中输入的数据呢？

【问题讨论】：

标签： reactjs formik

【解决方案1】：

这就是你重置表单的原因：

setValues({
   ...initialValues,
   testGroup: Number(input)
});

改用setFieldValue，或使用values 代替initialFormValues。

【讨论】：