Material UI 使用 redux-form 值被销毁的自动完成

Question

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

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

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

Answer 1

看来你是对的，只是值显示不正确。如果您能够从 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 />
        )}
      />

Answer 2

您需要定义自动完成的值属性，以便在您再次访问表单时显示 selected 值。

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

还有 multi 的 onChange 值 select AutoComplete 需要通知 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;

Material UI 使用 redux-form 值被销毁的自动完成

Material UI autocomplete with redux-form values getting destroyed

javascript

reactjs

react-redux

material-ui

redux-form