使用 <FieldArray/> 中的自定义组件通过 Formik <Field/> 为 <TextField/> 设置值

Question

我正在尝试通过使用地图索引来设置动态表单的默认值，下面是代码片段：

<Formik
                initialValues={initialInputField}
                onSubmit={(data) => handleSubmitForm(data)}
                // validationSchema={validationSchema}
            >
                {({ values, handleSubmit, isSubmitting }) => (
                    <Form onSubmit={handleSubmit}>
                        <FieldArray name="processes">
                            {({ push, remove }) => {
                                return (
                                    <div>
                                        <Button
                                            onClick={() => push(initialInputField.processes[0])}
                                            className={classes.generateButton}
                                            variant="outlined"
                                        >
                                            Add Process
                                        </Button>
                                        <div className={classes.root}>
                                            {map(values.processes, (data, index: number) => {
                                                return (
                                                    <div key={index}>
                                                        <Field
                                                            label="Process"
                                                            value={index} // add index as process value
                                                            name={`processes[${index}].process`}
                                                            component={Input}
                                                        />
                                                        <IconButton onClick={() => remove(index)}>
                                                            <RemoveIcon />
                                                        </IconButton>
                                                    </div>
                                                );
                                            })}
                                        </div>
                                    </div>
                                );
                            }}
                        </FieldArray>
                        <Button
                            className={classes.generateButton}
                            variant="outlined"
                            type="submit"
                        >
                            Generate
                        </Button>
                    </Form>
                )}
            </Formik>

这是我的自定义组件的代码片段：

const Input = ({ field, value, label, form: { errors } }: any) => {
    return (
        <>
            <TextField {...field} label={label} value={value} variant="filled" />
        </>
    );
};

问题是当我提交表单时，尽管表单已经更改，但 process 的所有值仍然是“”，这是我的初始值

示例：（流程填写正确的值）

（我提交表格后流程仍然是空的）

Answer 1

我认为这是因为您正在将“值”道具传递给输入组件并使用它。输入将其显示为索引，但您没有做任何更改 formik 状态的操作。

您还支持将“字段...”传播到同样具有“价值”的输入上。你想要 field.value 而不是你的价值支柱，所以你实际上可以在你的输入中反映 formik 的状态。

我认为预先创建这些数据并将其通过管道传输到 formik initialValues prop 中是一种更好的做法，而且痛苦更少。

否则，您可以在 Input 组件的 init 中处理它，将 defaultValue 属性传递给它（索引），使用 form.setFieldValue（表单是由 Field 给出的属性）使用 defaultValue 更新 formik 状态如果不存在 field.value。

使用 <FieldArray/> 中的自定义组件通过 Formik <Field/> 为 <TextField/> 设置值

set value for <TextField/> through Formik <Field/> using custom component in <FieldArray/>

reactjs

material-ui

formik

formik-material-ui