材质 UI 自动完成，并销毁重复表单值

Question

我正在尝试将材质 UI 的自动完成组件与 redux 向导窗体一起使用

我能够链接材料UI提供的自动完成，但是当我回到上一页并返回到自动完成字段所在的第二页时，尽管edictOnUnmount设置为false，该字段仍被销毁。（所有其他字段不会被销毁，但只有第 2 页中使用材料 UI 自动完成功能的字段）实际上，我不认为它被破坏了，因为值仍然存在，你只是在输入中看不到它

此外，当我单击“提交”时，“主要爱好”部分的值会通过，但多个爱好部分的值无法通过。任何人都可以看看，看看出了什么问题？谢谢

Answer 1

您需要定义“自动完成”的值属性，以便在再次访问表单时显示所选值。您必须注意，Hobby 表单中的两个字段需要使用不同的名称进行定义此外，多选自动完成的更改值需要通知 reduxForm 有关更改的信息多个完成.jsimport React from "react";import { TextField } from "@material-ui/core";import { Autocomplete } from "@material-ui/lab";const hobbies = [&nbsp; { title: "WATCHING MOVIE" },&nbsp; { title: "SPORTS" },&nbsp; { title: "MUSIC" },&nbsp; { title: "DRAWING" }];const MultipleComplete = ({&nbsp; input,&nbsp; meta: { touched, error, submitFailed }}) => {&nbsp; const { onChange, ...rest } = input;&nbsp; return (&nbsp; &nbsp; <div>&nbsp; &nbsp; &nbsp; <Autocomplete&nbsp; &nbsp; &nbsp; &nbsp; multiple&nbsp; &nbsp; &nbsp; &nbsp; limitTags={2}&nbsp; &nbsp; &nbsp; &nbsp; value={input.value || []}&nbsp; &nbsp; &nbsp; &nbsp; id="multiple-limit-tags"&nbsp; &nbsp; &nbsp; &nbsp; options={hobbies}&nbsp; &nbsp; &nbsp; &nbsp; onChange={(e, newValue) => {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; onChange(newValue);&nbsp; &nbsp; &nbsp; &nbsp; }}&nbsp; &nbsp; &nbsp; &nbsp; getOptionLabel={option => option.title}&nbsp; &nbsp; &nbsp; &nbsp; getOptionSelected={(option, value) => option.title === value.title}&nbsp; &nbsp; &nbsp; &nbsp; renderInput={params => (&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <TextField&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; {...params}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; variant="outlined"&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; placeholder="Choose Multiple Hobbies"&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; fullWidth&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; />&nbsp; &nbsp; &nbsp; &nbsp; )}&nbsp; &nbsp; &nbsp; />&nbsp; &nbsp; </div>&nbsp; );};export default MultipleComplete;自动滚球完成.jsimport React from "react";import { TextField } from "@material-ui/core";import { Autocomplete } from "@material-ui/lab";const hobbies = [&nbsp; { title: "WATCHING MOVIE" },&nbsp; { title: "SPORTS" },&nbsp; { title: "MUSIC" },&nbsp; { title: "DRAWING" }];const AutoHobbyComplete = ({&nbsp; input,&nbsp; meta: { touched, error, submitFailed }}) => {&nbsp; const getSelectedOption = () => {&nbsp; &nbsp; return hobbies.find(o => o.title === input.value);&nbsp; };&nbsp; const { onChange, ...rest } = input;&nbsp; return (&nbsp; &nbsp; <div>&nbsp; &nbsp; &nbsp; <Autocomplete&nbsp; &nbsp; &nbsp; &nbsp; autoSelect&nbsp; &nbsp; &nbsp; &nbsp; value={getSelectedOption()}&nbsp; &nbsp; &nbsp; &nbsp; options={hobbies}&nbsp; &nbsp; &nbsp; &nbsp; autoHighlight&nbsp; &nbsp; &nbsp; &nbsp; getOptionLabel={option => option.title}&nbsp; &nbsp; &nbsp; &nbsp; onChange={(event, newValue) => onChange(newValue)}&nbsp; &nbsp; &nbsp; &nbsp; getOptionSelected={(option, value) => {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; return option.title === value.title || option.title === input.value;&nbsp; &nbsp; &nbsp; &nbsp; }}&nbsp; &nbsp; &nbsp; &nbsp; renderInput={params => {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; return (&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <TextField&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; {...params}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; {...rest}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; value={input.value}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; variant="outlined"&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; fullWidth&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; />&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; );&nbsp; &nbsp; &nbsp; &nbsp; }}&nbsp; &nbsp; &nbsp; />&nbsp; &nbsp; </div>&nbsp; );};export default AutoHobbyComplete;

Answer 2

看来你是对的，值只是没有正确显示。如果能够从 redux 表单中获取值，则可以将该值作为 inputValue 传递给自动完成。这将在文本框中显示该值。确保使用输入值而不是值。&nbsp;<Autocomplete&nbsp; &nbsp; &nbsp; &nbsp; inputValue={//this is where your redux form value should be displayed}&nbsp; &nbsp; &nbsp; &nbsp; autoSelect&nbsp; &nbsp; &nbsp; &nbsp; options={hobbies}&nbsp; &nbsp; &nbsp; &nbsp; autoHighlight&nbsp; &nbsp; &nbsp; &nbsp; getOptionLabel={option => option.title}&nbsp; &nbsp; &nbsp; &nbsp; onChange={(event, newValue) => console.log(newValue)}&nbsp; &nbsp; &nbsp; &nbsp; getOptionSelected={(option, value) => option.title === value.title}&nbsp; &nbsp; &nbsp; &nbsp; renderInput={params => (&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <TextField {...params} {...input} value="test" variant="outlined" fullWidth />&nbsp; &nbsp; &nbsp; &nbsp; )}&nbsp; &nbsp; &nbsp; />