Question

我想使用Formik的表单验证，它确实可以正常工作，但是在自动完成组件中显示选定值时遇到了一些问题。我创建了添加 / 删除按钮来动态调整表单中的行数。当我尝试删除表单行时，会出现该错误，该行位于幕后，具有正确的值，如DEBUG中所示，但是用户的输入显示了已删除的表单行中的值。我不知道如何显示或处理这种情况。 Form before removal， Form after removal

<FieldArray name="actions"
        render={arrayHelpers =>
            values.actions.map((action, index) => (
                <Grid item container spacing={1} justify="center" alignItems="center"
                        key={index}>
                    <Grid item xs={4}>
                        <Field
                            error={getIn(errors, `actions.${index}.suggestedAction`) &&
                            getIn(touched, `actions.${index}.suggestedAction`)}
                            helperText={<ErrorMessage
                                name={`actions.${index}.suggestedAction`}/>}
                            name={`actions.${index}.suggestedAction`}
                            id={`actions.${index}.suggestedAction`}
                            variant="outlined"
                            fullWidth
                            as={TextField}
                            label="Siūloma priemonė"
                            multiline
                            rows={3}
                            rowsMax={10}
                        />
                    </Grid>
                    <Grid item xs={4}>
                        <Autocomplete
                            freeSolo
                            onBlur={handleBlur}
                            onChange={(e, value) => {
                                //If adding new
                                if (value && value.inputValue) {
                                    setOpen(true);
                                    setFieldValue(`actions.${index}.responsiblePerson`, value.inputValue)
                                } else if (value && value.id) {
                                    //Selecting existing
                                    setFieldValue(`actions.${index}.responsiblePerson`, value.id)
                                } else {
                                    setFieldValue(`actions.${index}.responsiblePerson`, "")
                                }
                            }}
                            getOptionLabel={(option) => {
                                if (typeof option === 'string') {
                                    return option;
                                }
                                if (option.inputValue) {
                                    return option.inputValue;
                                }
                                return option.title;
                            }}
                            handleHomeEndKeys
                            clearText="Pašalinti"
                            noOptionsText="Tuščia..."
                            renderOption={option => option.title}
                            filterOptions={(options, params) => {
                                const filtered = filter(options, params);
                                if (params.inputValue !== '') {
                                    filtered.push({
                                        inputValue: params.inputValue,
                                        title: `Pridėti "${params.inputValue}"`,
                                    });
                                }
                                return filtered;
                            }}
                            renderInput={params => (
                                <TextField
                                    {...params}
                                    id={`actions.${index}.responsiblePerson`}
                                    name={`actions.${index}.responsiblePerson`}
                                    error={getIn(errors, `actions.${index}.responsiblePerson`) &&
                                    getIn(touched, `actions.${index}.responsiblePerson`)}
                                    helperText={<ErrorMessage
                                        name={`actions.${index}.responsiblePerson`}/>}
                                    onChange={handleChange}
                                    variant="outlined"
                                    label="Atsakingas asmuo"
                                    placeholder="Vardenis Pavardenis"
                                />
                            )}
                            options={top100Films}/>
                    </Grid>
                    <DateTimeUtilsProvider>
                        <Grid item xs={3}>
                            <Field
                                disableToolbar
                                as={KeyboardDatePicker}
                                variant="inline"
                                inputVariant="outlined"
                                format="yyyy-MM-dd"
                                id={`actions.${index}.deadline`}
                                name={`actions.${index}.deadline`}
                                error={getIn(errors, `actions.${index}.deadline`) &&
                                getIn(touched, `actions.${index}.deadline`)}
                                helperText={<ErrorMessage
                                    name={`actions.${index}.deadline`}/>}
                                label="Įvykdymo terminas"
                                onChange={value =>
                                    setFieldValue(`actions.${index}.deadline`, value)}
                            />
                        </Grid>
                    </DateTimeUtilsProvider>
                    <Grid item xs={1}>
                        <ButtonGroup fullWidth orientation="vertical" size="medium">
                            <Button onClick={() => {
                                arrayHelpers.remove(index);
                            }}
                                    disabled={values.actions.length === 1}
                                    classes={removeButtonClasses}>
                                <HighlightOff/>
                            </Button>
                            <Button onClick={() => {
                                arrayHelpers.insert(index + 1, {
                                    suggestedAction: "",
                                    responsiblePerson: "",
                                    deadline: Date.now()
                                })
                            }}
                                    color="primary">
                                <AddCircleOutline/>
                            </Button>
                        </ButtonGroup>
                    </Grid>
                </Grid>
            ))
        }
/>
</Grid>

Answer 1

代替

arrayHelpers.insert()

我用过

arrayHelpers.push()

及其对我来说很好。

Answer 2

我遇到了同样的问题。我在 value 内的 <Field> 上设置了 renderInput 道具。

<Autocomplete
  renderInput={params => (
    <Field {...params} component={TextField} value={values.myArray[index]} />
  )}
/>

我能够通过将 value 属性移动到自动完成来修复它。

<Autocomplete
  value={values.myArray[index]}
  renderInput={params => (
    <Field {...params} component={TextField} />
  )}
  ...
/>

React Material UI + Formik FieldArray自动完成控制值在移除后保持不变

2 个答案: