MUI V5 Автозаполнение. Как динамически определить введите аргумент в образец на основе на основе InsableClearble? ⇐ Javascript

[Anonymous]

Я пытаюсь определить многоразовый компонент автозаполнения с помощью MUI Autocomplete в качестве фундамента. < /p>
Я хочу определить свой собственный обратный вызов (для свойства), который принимает: < /p>

Строка, если отключен, это правда < /li>

. null, если DisableClearbeable Is false < /li>
< /ul>
Каждая предопределенная опция является объектом с 2 полями:
{ label: string, value: string }
Поэтому я предполагаю, что значение онкола может быть значением | строка | null < /code> < /p>

Значение - объект - это метка и значение < /li>
String - если FreeSolo < /li>
null - если отключить false < /li>
< /ul>
hare onchange: < /p>
< /ul>
hare onchange: p>
< /ul>
. onChange={(_, value: Value | string | null) => {
onChange((typeof value === 'string' ? value : value?.value) || null);
}}
< /code>
, который отлично работал, в то время как InvableClearble всегда был false
, но теперь я определяю Genericable Generic < /p>
export type AutocompleteProps<
Value extends LabelValuePair,
FreeSolo extends boolean,
DisableClearable extends boolean,
> = Omit<
MuiAutocompleteProps,
| 'renderInput'
| 'onChange'
| 'multiple'
| 'autoSelect'
| 'selectOnFocus'
| 'clearOnBlur'
| 'handleHomeEndKeys'
> & {
error?: boolean;
onChange: (value: DisableClearable extends true ? string : string | null) => void;
};
< /code>
и теперь для < /p>
onChange={(_, value: Value | string | null) => {
onChange((typeof value === 'string' ? value : value?.value) || null);
}}
< /code>
Я получаю ошибку ts: < /p>
TS2345: Argument of type string | null is not assignable to parameter of type
DisableClearable extends true ? string : string | null
Type null is not assignable to type
DisableClearable extends true ? string : string | null
< /code>
Итак, мне интересно, как решить эту проблему и позволить TS динамически вывести TS тип onchange < /p>
Я ожидаю, что я могу передать компонент:
(значение: строка) = void, если DisableClearable true - это истинно
(значение: string | null) = void, если Disablecalebable Is false Is falless < /b /> vase is vise is full is is fullecleable is falseleclearble < /br /> (value: string | null). Компонент: < /p>
export type AutocompleteProps<
Value extends LabelValuePair,
FreeSolo extends boolean,
DisableClearable extends boolean,
> = Omit<
MuiAutocompleteProps,
| 'renderInput'
| 'onChange'
| 'multiple'
| 'autoSelect'
| 'selectOnFocus'
| 'clearOnBlur'
| 'handleHomeEndKeys'
> & {
error?: boolean;
onChange: (
value: DisableClearable extends true ? string : string | null,
) => void;
};

export const Autocomplete = <
Value extends LabelValuePair,
FreeSolo extends boolean,
DisableClearable extends boolean,
>({
error,
onChange,
freeSolo,
value,
...props
}: AutocompleteProps) => {
const freeSoloParams = freeSolo
? {
selectOnFocus: true,
clearOnBlur: true,
handleHomeEndKeys: true,
}
: {};

// we are trying to find selected option in options otherwise using value (for example when free solo)
const selectedValue = useMemo(
() => props.options.find((option) => option.value === value) || value,
[props.options, value],
);

return (
{
const filter = createFilterOptions();
const filtered = filter(options, params);

if (!freeSolo) {
return filtered;
}

const { inputValue } = params;
const isExisting = options.some(
(option) => inputValue === option.label,
);
if (inputValue && !isExisting) {
filtered.push({
value: inputValue,
label: `Add "${inputValue}"`,
} as Value);
}

return filtered;
}}
freeSolo={freeSolo}
onChange={(_, value: Value | string | null) => {
onChange((typeof value === 'string' ? value : value?.value) || null);
}}
renderInput={(params) => }
/>
);
};


Подробнее здесь: https://stackoverflow.com/questions/795 ... ge-callbac