reactjs - KendoReact 和 react-hook-form

Question

我在使用带有react-hook-form库的KendoReact组件时遇到问题：

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

Stackblitz 样本在这里

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

我找不到解决方法，希望其他人确实找到了。

标签： reactjsreact-hook-formkendo-react-ui

Answer 1

在 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"
  />

堆栈闪电战