KendoReact и React-Hook-форма

У меня проблемы с использованием компонентов KendoReact с react-hook-form:

<Controller
   as={Input}
   name="firstName"
   control={control}
   defaultValue="type something here"
/>

Образец Stackblitz здесь

образец формы реакции-крючка использует компоненты MaterialUI для отображения сторонних интеграция библиотек и, похоже, работает правильно. При использовании компонента Kendo Input ввод любого текста в элемент управления вводом приводит к тому, что в элементе управления отображается [object Object] вместо введенного значения. Это потому, что значение, которое должно быть установлено в элементе управления, - это объект event, а не фактическое значение.

Я не могу найти способ обойти это, надеюсь, кто-то другой нашел его.


reactjs react-hook-form kendo-react-ui
person dvlsc    schedule 23.04.2020    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Создание простой оболочки вокруг Input для получения значения из onChange будет работать:

const InputWrapper = props => {
  return <Input {...props} onChange={e => {
    props.onChange(e.target.value)
  }} />
}

...

  <Controller
    as={InputWrapper}
    name="firstName"
    control={control}
    defaultValue="type something here"
  />

stackblitz

person azium    schedule 23.04.2020
comment
Пришлось создать оболочку как function InputWrapper(props) { ... }, но это сработало. Спасибо! - person dvlsc; 23.04.2020