KendoReact 和 react-hook-form

Question

我在使用 KendoReact components with the react-hook-form 库时遇到问题：

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

Stackblitz sample here

react-hook-form sample 正在使用 MaterialUI 组件来显示第三方库集成并且似乎工作正常。使用 Kendo 输入组件时，在输入控件中键入任何内容都会导致控件显示 [object Object] 而不是键入的值。那是因为要在控件上设置的值是 event 对象而不是实际值。

我找不到解决这个问题的方法，希望其他人确实找到了。

Answer 1

围绕输入创建一个简单的包装器以从 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

KendoReact 和 react-hook-form

KendoReact and react-hook-form

reactjs

kendo-react-ui

react-hook-form