Question

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

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

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

Answer 1

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

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

多选择自动完成的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 />
        )}
      />

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

2 个答案: