reactjs - 设定值通过福米克使用自定义组件

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 的所有值仍然是 "" 这是我的初始值

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

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

标签： reactjsmaterial-uiformikformik-material-ui

Answer 1

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

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

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

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