Gimir
@Gimir
JavaScript dev

Как связать инпут из react-autosuggest с react-hook-form?

Добрый вечер! У меня на странице есть инпут из библиотеки react-autosuggest, контролируемый. Хочу добавить валидацию и исключить ненужные рендеры с помощью библиотеки react-hook-form. Хотя на в документации react-hook-form и есть инструкция как интегрировать ее в сторонние библиотеки, у меня это не получается, вот как я это делаю:
const { handleSubmit, reset, control } = useForm();

<Controller
    control={control}
    name="some_name"
    render={({ onChange, onBlur, value, name }) => (
       <SuggestInput
       onInputChange={onChange}
       inputValue={value}
       name={name}
       getSuggestions={getSuggestions}
       />
     )}
/>


Вот компонент SuggestInput:
const SuggestInput = ({ onInputChange, inputValue, getSuggestions, name }) => {

    const [ options, setOptions ] = useState([]);

    const inputProps = {
        value: inputValue,
        onChange: (event, {newValue}) => onInputChange(newValue)
    }
    const getSuggestionValue = suggestion => suggestion.name;

    const renderSuggestion = suggestion => (
    <SuggestWrapper>
        {suggestion.name}
    </SuggestWrapper>
    );
    const renderInputComponent = (inputProps) => <input type="text" {...inputProps} name={name} />

    const onSuggestionsFetchRequested = ({ value }) => {
        getSuggestions(value).then(suggestions => setOptions(suggestions))
    };
    const onSuggestionsClearRequested = () => setOptions([])

    return <Autosuggest
            renderInputComponent={renderInputComponent}
            suggestions={options}
            onSuggestionsFetchRequested={onSuggestionsFetchRequested}
            onSuggestionsClearRequested={onSuggestionsClearRequested}
            getSuggestionValue={getSuggestionValue}
            renderSuggestion={renderSuggestion}
            inputProps={inputProps}
            theme={theme}
        />
}


Я получаю такую ошибку когда компонент рендерится:
Uncaught TypeError: Cannot read property 'trim' of undefined в компоненте SuggestInput

Как связать этих двух что-бы все работало как надо?
  • Вопрос задан
  • 44 просмотра
Решения вопроса 1
Gimir
@Gimir Автор вопроса
JavaScript dev
Надо было добавить defaultValue компоненту контроллера, Autosuggest пытался вызвать метод trim на undefined, по этому была ошибка.
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы