材质 UI 自动完成，redux-form 值被破坏

Question

我正在尝试将 Material UI 的自动完成组件与 redux 向导表单一起使用

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

此外，当我单击提交时，主要爱好部分的值通过但多个爱好部分的值没有通过。任何人都可以看看有什么问题吗？谢谢

Answer 1

您需要定义 AutoComplete 的 value 属性，以便在您再次访问表单时显示选定的值。

一定要注意，Hobby 表单中的两个字段需要定义不同的名称

多选 AutoComplete 的 onChange 值也需要通知 reduxForm 有关更改

MultipleComplete.js

import React from "react";
import { TextField } from "@material-ui/core";
import { Autocomplete } from "@material-ui/lab";
const hobbies = [
  { title: "WATCHING MOVIE" },
  { title: "SPORTS" },
  { title: "MUSIC" },
  { title: "DRAWING" }
];

const MultipleComplete = ({
  input,
  meta: { touched, error, submitFailed }
}) => {
  const { onChange, ...rest } = input;
  return (
    <div>
      <Autocomplete
        multiple
        limitTags={2}
        value={input.value || []}
        id="multiple-limit-tags"
        options={hobbies}
        onChange={(e, newValue) => {
          onChange(newValue);
        }}
        getOptionLabel={option => option.title}
        getOptionSelected={(option, value) => option.title === value.title}
        renderInput={params => (
          <TextField
            {...params}
            variant="outlined"
            placeholder="Choose Multiple Hobbies"
            fullWidth
          />
        )}
      />
    </div>
  );
};
export default MultipleComplete;

AutoHobbyComplete.js

import React from "react";
import { TextField } from "@material-ui/core";
import { Autocomplete } from "@material-ui/lab";
const hobbies = [
  { title: "WATCHING MOVIE" },
  { title: "SPORTS" },
  { title: "MUSIC" },
  { title: "DRAWING" }
];

const AutoHobbyComplete = ({
  input,
  meta: { touched, error, submitFailed }
}) => {
  const getSelectedOption = () => {
    return hobbies.find(o => o.title === input.value);
  };
  const { onChange, ...rest } = input;
  return (
    <div>
      <Autocomplete
        autoSelect
        value={getSelectedOption()}
        options={hobbies}
        autoHighlight
        getOptionLabel={option => option.title}
        onChange={(event, newValue) => onChange(newValue)}
        getOptionSelected={(option, value) => {
          return option.title === value.title || option.title === input.value;
        }}
        renderInput={params => {
          return (
            <TextField
              {...params}
              {...rest}
              value={input.value}
              variant="outlined"
              fullWidth
            />
          );
        }}
      />
    </div>
  );
};

export default AutoHobbyComplete;