KendoReact 和 react-hook-form答案

【问题标题】：KendoReact and react-hook-formKendoReact 和 react-hook-form
【发布时间】：2020-04-23 20:14:17
【问题描述】：

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

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

Stackblitz sample here

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

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

【问题讨论】：

标签： reactjs react-hook-form kendo-react-ui

【解决方案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"
  />

stackblitz

【讨论】：

必须将包装器创建为function InputWrapper(props) { ... }，但这样做了。谢谢！