React Material UI 自动完成获取未完成的用户输入
React Material UI Autocomplete get uncompleted user input
我将 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?
中的任何其他输入字段是否有可能以某种方式实现
我似乎在寻找 freeSolo
设置:
我将 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?
中的任何其他输入字段是否有可能以某种方式实现我似乎在寻找 freeSolo
设置: