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

Question

我正在尝试将材质 UI 的自动完成组件与 redux 向导窗体一起使用我能够链接材料UI提供的自动完成，但是当我回到上一页并返回到自动完成字段所在的第二页时，尽管edictOnUnmount设置为false，该字段仍被销毁。（所有其他字段不会被销毁，但只有第 2 页中使用材料 UI 自动完成功能的字段）实际上，我不认为它被破坏了，因为值仍然存在，你只是在输入中看不到它此外，当我单击“提交”时，“主要爱好”部分的值会通过，但多个爱好部分的值无法通过。任何人都可以看看，看看出了什么问题？谢谢

Answer 1

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

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

此外，多选自动完成的更改值需要通知 reduxForm 有关更改的信息

多个完成.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;

自动滚球完成.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 传递给自动完成。这将在文本框中显示该值。确保使用输入值而不是值。

 <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 />

        )}

      />