Я пытаюсь использовать пользовательский компонент Material-UI Autocomplete и подключить его к react-hook-form.
TL; DR: необходимо использовать автозаполнение MUI с контроллером формы реакции без
defaultValue
Мой пользовательский Autocomplete компонент принимает объект со структурой {_id:'', name: ''}, он отображает имя и возвращает _id, когда выбран параметр. Autocomplete работает нормально.
<Autocomplete
options={options}
getOptionLabel={option => option.name}
getOptionSelected={(option, value) => option._id === value._id}
onChange={(event, newValue, reason) => {
handler(name, reason === 'clear' ? null : newValue._id);
}}
renderInput={params => <TextField {...params} {...inputProps} />}
/>
Чтобы заставить его работать с react-hook-form, я установил setValues как обработчик для onChange в Autocomplete и вручную зарегистрировал компонент в useEffect следующим образом
useEffect(() => {
register({ name: "country1" });
},[]);
Это нормально работает, но я бы хотел не использовать ловушку useEffect и просто как-то напрямую использовать регистр.
Затем я попытался использовать компонент Controller из react-hook-form, чтобы правильно зарегистрировать поле в форме, а не использовать ловушку useEffect.
<Controller
name="country2"
as={
<Autocomplete
options={options}
getOptionLabel={option => option.name}
getOptionSelected={(option, value) => option._id === value._id}
onChange={(event, newValue, reason) =>
reason === "clear" ? null : newValue._id
}
renderInput={params => (
<TextField {...params} label="Country" />
)}
/>
}
control={control}
/>
Я изменил onChange в компоненте Autocomplete, чтобы вернуть значение напрямую, но похоже, что это не работает.
Использование inputRef={register} на <TextField/> не поможет мне, потому что я хочу сохранить _id, а не name
ЗДЕСЬ - это рабочая песочница с двумя вариантами. Первый с useEffect и setValue в Autocomplete, который работает. Вторая моя попытка использовать Controller компонент
Любая помощь приветствуется.
LE
После комментария Билла с рабочей песочницей MUI Autocomplete мне удалось получить функциональный результат
<Controller
name="country"
as={
<Autocomplete
options={options}
getOptionLabel={option => option.name}
getOptionSelected={(option, value) => option._id === value._id}
renderInput={params => <TextField {...params} label="Country" />}
/>
}
onChange={([, { _id }]) => _id}
control={control}
/>
Единственная проблема в том, что у меня в консоли появляется MUI Error
Material-UI: компонент изменяет состояние неконтролируемого значения автозаполнения, чтобы управлять им.
Я пытался установить для него defaultValue, но он все равно ведет себя так. Также я бы не хотел устанавливать значение по умолчанию из массива параметров из-за того, что эти поля в форме не требуются.
Обновленная песочница ЗДЕСЬ
Любая помощь по-прежнему очень ценится
