使用&lt；Field數組/&gt；中的自定義組件，通過表單&lt；字段/&gt；設置&lt；Textfield/&gt；的值。 [英] set value for <TextField/> through Formik <Field/> using custom component in <FieldArray/>

問題描述

我正在嘗試通過使用map的索引來設置動態表單的默認值，以下是代碼片段：

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

問題是，當我提交表單時，盡管表單已經更改，但流程的所有值仍為&&；這是我的初始值

示例： (使用正確的值填寫進程)

(我提交表單后進程仍然為空)

推薦答案

我認為這是因為您正在將"；值"；屬性傳遞給輸入組件并使用它。輸入會將其顯示為索引，但您沒有執行任何操作來更改Formik狀態。

您還可以將"；field..."；道具傳播到輸入上，該輸入也具有"；Value"；。您需要的是field.value而不是您的值屬性，這樣您就可以在您的輸入中實際反映formik的狀態。

我認為這將是一種更好的做法，而且不那么痛苦，只需預先創建此數據并將其傳送到Forik InitialValues道具中。

否則，您可以在輸入組件的init中處理它，將defaultValue屬性傳遞給它(Index)，使用form.setFieldValue(Form是字段提供的屬性)在不存在field.value的情況下使用defaultValue更新formik狀態。

這篇關于使用&lt；Field數組/&gt；中的自定義組件，通過表單&lt；字段/&gt；設置&lt；Textfield/&gt；的值。的文章就介紹到這了，希望我們推薦的答案對大家有所幫助，也希望大家多多支持IT屋！