React Material UI 自动完成获取未完成的用户输入

Question

我将 Material UI 的自动完成输入与 react-hook-form 一起使用，如下所示：

import React from "react";
import {Controller} from "react-hook-form";
import {Autocomplete} from "@mui/material";

export const ControlledAutocomplete = ({
                                           options,
                                           renderInput,
                                           getOptionLabel,
                                           onChange: ignored,
                                           control,
                                           defaultValue,
                                           name,
                                           renderOption,
                                           viewOnly
                                       }) => {
    return (
        <Controller
            defaultValue={defaultValue}
            render={({field: {onChange, ...props}, fieldState: {error}}) => (
                <Autocomplete
                    options={options || []}
                    getOptionLabel={getOptionLabel}
                    isOptionEqualToValue={(option, value) => {
                        if (typeof (value) === 'object') {
                            return option.id === value.id
                        } else {
                            return option.id === value
                        }
                    }}
                    renderOption={renderOption}
                    disabled={viewOnly}
                    autoComplete={true}
                    renderInput={renderInput}
                    onChange={(e, data) => onChange(data)}
                    {...props}
                />
            )}
            control={control}
            name={name}
        />
    );
}

效果很好，但如果没有可用建议，我想获得用户输入。基本上，如果自动完成列表中没有建议，我想从用户那里获取原始输入。自动完成或 MUI?

中的任何其他输入字段是否有可能以某种方式实现

Answer 1

我似乎在寻找 freeSolo 设置：

React Material UI 自动完成获取未完成的用户输入

React Material UI Autocomplete get uncompleted user input

javascript

reactjs

material-ui

react-hook-form