如何将键入的值保存在 Formik 数据的初始值中？

Question

我使用 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 组件呈现两个单选按钮。

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

Answer 1

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

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

尝试 setFieldValue instead, or use values 而不是 initialFormValues。