“输入”类型上不存在属性“模糊”答案

【问题标题】：Property 'blur' does not exist on type 'Input'“输入”类型上不存在属性“模糊”
【发布时间】：2020-12-24 17:08:43
【问题描述】：

我正在使用useRef 挂钩将ref 属性传递到我的自定义FieldInput 组件中。然后将其用于验证我的表单。

const fieldRef = useRef();
...
    const handleSubmitForm = (
    values: FormValues,
    helpers: FormikHelpers<FormValues>,
  ) => {
 ....
    fieldRef.current.blur();
    helpers.resetForm();
  };

但是，我在 fieldRef.current 上收到一个错误 Object is possibly 'undefined'.。为了解决这个问题，我进行了以下更改：

const fieldRef = useRef<Input>(null);
...
fieldRef.current?.blur();

但是，我仍然收到Property 'blur' does not exist on type 'Input'. 的错误。这里，Input 是从 native-base 导入的。因此，我在提交表单时收到类型错误/警告。 An unhandled error was caught from submitForm() 我怎样才能摆脱这些错误？

在codesandbox中复制了完整的场景：https://snack.expo.io/@nhammad/jealous-beef-jerky-fix

【问题讨论】：

我可以点击搜索就好了。您指的是提交时的什么错误？
.blur() 是一个 jQuery 调用。你在使用 jQuery 库吗？如果没有，则需要绑定事件或触发onBlur 事件。
可能重复：stackoverflow.com/questions/56217115/…

标签： javascript reactjs typescript react-native native-base

【解决方案1】：

好的，首先，在您的FieldInput 组件中，您将这些事件处理程序传递给Input，如下所示：<Input onCahnge={callback()}/> ，而不是像这样：<Input onChange={()=>callback()}/>。您没有传递回调，而是调用它们并将其结果作为事件处理程序传递。这导致您的组件出错。

在修复该问题并让类型提示正常工作后，编辑器仍会发出 blur 类型 Input 缺失的信号。查看文档并尝试控制台记录 ref 元素后，似乎实际上没有暴露 blur 方法。 TextField from react-native 已暴露，但未转发至native-base Input

【讨论】：

{()=>callback()} 如果我把它改成这个，我不能再正确地输入输入字段，因为文本不断被删除。我在模拟器和真实设备上检查了这个问题，不确定问题是否存在于网络模式下。您能否编辑沙箱并显示它是否没有给您错误？
1.是的，你无法摆脱这个错误。 2. 使用 typescript 和 react native，handleChange() 不是一个选项。您应该改用setFieldValue()
而不是useRef<Input>(null)，如果我将其更改为useRef<any>，则会删除内联错误。但是，我仍然需要一个解决方法来解决我在提交表单时收到的警告TypeError: _fieldRef$current.blur is not a function（对于当前的代码框）
stackoverflow.com/questions/63667170/… 这是我最初的问题。为了克服这个问题，我尝试使用 useRef 但这也给了我警告。是否有另一种方法可以在不使用 useRef 的情况下修复它？ 2. 你建议我在哪里使用 setFieldValue()？ 3. {()=>callback()} 如果我把它改成这个，我不能再在输入字段中正确输入，因为文本不断被删除。
这个错误没有解决方法。该错误告诉您该元素上没有blur 函数。