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

Question

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

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

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

Answer 1

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

你必须注意，爱好表单中的两个字段需要定义不同的名称

还有多选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;

Answer 2

看来你是对的，只是值没有正确显示。如果您能够从 redux 表单中获取值，则可以将该值作为 inputValue 传递给自动完成。这将在文本框中显示值。确保使用 inputValue 而不是 value。

 <Autocomplete
        inputValue={//this is where your redux form value should be displayed}
        autoSelect
        options={hobbies}
        autoHighlight
        getOptionLabel={option => option.title}
        onChange={(event, newValue) => console.log(newValue)}
        getOptionSelected={(option, value) => option.title === value.title}
        renderInput={params => (
          <TextField {...params} {...input} value="test" variant="outlined" fullWidth />
        )}
      />