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" />
        </>
    );
};

问题是当我提交表单时，过程的所有值仍然是“”，这是我的初始值，尽管表单已经改变了

示例： (processes 填写正确的值)

（提交表单后进程仍然为空）

Answer 1

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

您还将“字段...”传播到输入上，该输入也具有“值”。您希望 field.value 不是您的 value 道具，因此您实际上可以在您的 Input 中反映 formik 的状态。

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

否则，您可以在 Input 组件的 init 中处理它，将 defaultValue 属性传递给它（索引），如果没有字段，则使用 form.setFieldValue（表单是 Field 提供的属性）以使用 defaultValue 更新 formik 状态。值存在。

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

1 个答案: