小编Edw*_*ard的帖子

React Material UI + Formik FieldArray 自动完成控件值在删除时保持不变

我想使用 Formik 的表单验证,它实际上工作得很好,但我在自动完成组件中的选定值显示方面遇到了一些问题。我创建了“添加/删除”按钮来动态调整表单中的行数。当我尝试删除表单行时,会发生该错误,幕后的下面的行具有调试中显示的正确值,但用户的输入显示已删除表单行中的值。我不知道如何显示或处理这种情况。\n删除前的表单,\n删除后的表单

\n
<FieldArray name="actions"\n        render={arrayHelpers =>\n            values.actions.map((action, index) => (\n                <Grid item container spacing={1} justify="center" alignItems="center"\n                        key={index}>\n                    <Grid item xs={4}>\n                        <Field\n                            error={getIn(errors, `actions.${index}.suggestedAction`) &&\n                            getIn(touched, `actions.${index}.suggestedAction`)}\n                            helperText={<ErrorMessage\n                                name={`actions.${index}.suggestedAction`}/>}\n                            name={`actions.${index}.suggestedAction`}\n                            id={`actions.${index}.suggestedAction`}\n                            variant="outlined"\n                            fullWidth\n                            as={TextField}\n                            label="Si\xc5\xabloma priemon\xc4\x97"\n                            multiline\n                            rows={3}\n                            rowsMax={10}\n                        />\n                    </Grid>\n                    <Grid item xs={4}>\n                        <Autocomplete\n                            freeSolo\n                            onBlur={handleBlur}\n                            onChange={(e, value) => {\n                                //If adding new\n                                if (value && value.inputValue) {\n                                    setOpen(true);\n                                    setFieldValue(`actions.${index}.responsiblePerson`, value.inputValue)\n                                } else if (value && value.id) {\n                                    //Selecting existing\n                                    setFieldValue(`actions.${index}.responsiblePerson`, …
Run Code Online (Sandbox Code Playgroud)

reactjs material-ui formik

6
推荐指数
1
解决办法
1741
查看次数

标签 统计

formik ×1

material-ui ×1

reactjs ×1