如何在挂载时保留 Material UI 自动完成的选定值？

Question

我使用 react-hook-form 和 Material UI 的自动完成功能制作了一个自动完成组件。该表单是向导表单（多步骤表单），因此当我切换步骤时，组件将卸载。这是代码

import { useState, useEffect } from "react";
import { Autocomplete as MuiAutcomplete} from "@mui/material";
import {useFormContext} from "react-hook-form";

interface props {
    name: string,
    options?: string[],
    getOptions?: (value: string) => { // For fetching values while typing
        label: string,
        id: number
    }[],
};

const Autocomplete = ({name, options=[], getOptions}: props) => {
    const [autcompleteValues, setAutocompleteValues] = useState<any[]>([]);
    const {watch, register} = useFormContext();

    const watchValue = watch(name);
    useEffect(() => {
        if (getOptions) {
           setAutocompleteValues(getOptions(watchValue));
        }
    }, [watchValue]);

    return (
        <MuiAutcomplete
        options={getOptions? autcompleteValues: options}
        renderInput={({InputProps, inputProps}) => (
                <div ref={InputProps.ref}>
                    <input type="text" {...inputProps} className="bg-transparent outline-none p-1"/>
                </div>
            )
        }
        getOptionLabel={option => option.label || option}
        {...register(name)}
        />
    )
}

export default Autocomplete

该组件工作正常，但当我切换步骤并返回时，输入字段为空。该值仍在注册中，但未显示在输入框中。我怎样才能做到即使我切换页面也能保存值？

Answer 1

我不确定你是否明白了，但对你的 Autocomplete 组件进行如下更改：

const { watch, register, setValue, getValues } = useFormContext();

从useFormContext

获取getValues和setValue函数

在Mui控件中像这样放置（完全删除寄存器）：

<MuiAutcomplete
  options={getOptions ? autcompleteValues : options}
  renderInput={({ InputProps, inputProps }) => (
    <div ref={InputProps.ref}>
      <input
        type="text"
        {...inputProps}
        className="bg-transparent outline-none p-1"
      />
    </div>
  )}
  value={getValues(name)}
  onChange={(e, v) => {
    console.log("Mui change", v);
    setValue(name, v);
  }}
  getOptionLabel={(option) => option.label || option}
/>

如何在挂载时保留 Material UI 自动完成的选定值？

How to persist selected value for Material UI Autocomplete on mount?

reactjs

material-ui

react-hook-form