如何将 useRef 与 Typescript/Formik 一起使用?

2024-01-15

我正在通过一个ref属性到我的自定义 FieldInput 中,我使用它来验证表单的 Formik。然而,它给出了一些 Typescript 错误。例如,在我的函数中:

    const handleSubmitForm = (
    values: FormValues,
    helpers: FormikHelpers<FormValues>,
  ) => {

    setShowFlatList(true);
    Keyboard.dismiss();
    helpers.resetForm();
    if (fieldRef && fieldRef.current){
          fieldRef.current.blur();}
    helpers.resetForm();
  };

我在 fieldRef.current 上收到错误Object is possibly 'undefined'.。我以为添加 if 条件可以解决这个问题,但事实并非如此。另外,当我提交表单时,我收到一条警告:

Warning: An unhandled error was caught from submitForm()
Error: "fieldRef.current.blur is not a function. (In 'fieldRef.current.blur()', 'fieldRef.current.blur' is undefined)" in handleSubmitForm 

同样,在我使用的自定义 FieldInput 组件中 ref={fieldRef},我收到一个错误:

Type '{ ref: MutableRefObject<undefined>; setFieldTouched: (field: string, isTouched?: boolean | undefined, shouldValidate?: boolean | undefined) => void; handleChange: { ...; }; ... 4 more ...; placeholderText: string; }' is not assignable to type 'IntrinsicAttributes & FieldInputProps & { children?: ReactNode; }'.
  Property 'ref' does not exist on type 'IntrinsicAttributes & FieldInputProps & { children?: ReactNode; }'.ts(2322)

我该如何解决这些问题?

这是一个代码和框:

https://snack.expo.io/@nhammad/jealous-beef-jerky-fix https://snack.expo.io/@nhammad/jealous-beef-jerky-fix


如果您查看当前的通用类型forwardRef方法,第一个参数是unknown。只需将您的签名输入方式更改为

export const FieldInput = React.forwardRef<Input, FieldInputProps>(...)

Typescript 将根据以下内容自动解析正确的类型forwardRef方法返回类型。

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

如何将 useRef 与 Typescript/Formik 一起使用? 的相关文章

  • 在网页上的文本框中键入内容时删除所有空格

    我如何在用户打字时即时删除输入到文本框中的空格 function var txt myTextbox var func function txt val txt val replace s g txt keyup func blur fun
  • Ember.js 处理 View 事件后转换到路由

    Setup 我有一个 Ember 应用程序 支持使用 Imgur API 上传图像 我已经有一个工作路线和模板来处理任何 Imgur ID 但我想在上传新图像后转换到此路线 使用返回的 Imgur ID 这是该应用程序的相关部分 http
  • Leaflet js虚构地图

    我是 Leaflet 的新手 我想了解如何创建完全交互式的虚构地图 我有一张图像想要转换为传单地图 该图像基本上像图表一样具有许多连接和点 我想首先将该图像转换为地图 能够将鼠标悬停在这些点上 突出显示它们并显示有关它们的信息 并且还可以在
  • 即使我可以监视其他方法,也无法监视事件处理程序

    我想使用 Jest Jasmine Enzyme 测试 React 中的事件处理程序 MyComponent js import React from react class MyComponent extends React Compon
  • 仅一页 JavaScript 应用程序

    您是否尝试过单页 Web 应用程序 即浏览器仅从服务器 获取 一页 其余部分由客户端 JavaScript 代码处理 此类 应用程序页面 的一个很好的例子是 Gmail 对于更简单的应用程序 例如博客和 CMS 使用这种方法有哪些优点和缺点
  • 在闪亮的数据表中为每个单元格显示工具提示或弹出窗口?

    有没有什么方法可以为 r闪亮数据表中的每个单元格获取工具提示 有很多方法可以获取悬停行或列 但我找不到一种方法来获取行和列索引并为每个单元格显示不同的悬停工具提示 任何人都可以修改以下代码吗 library shiny library DT
  • 通过 node-http-proxy 保留基于 cookie 的会话

    我有一个简单的基于 Express 的 Node js Web 服务器 用于开发 JavaScript 应用程序 我将服务器设置为使用 node http proxy 来代理应用程序向在不同域和端口上运行的 Jetty 服务器发出的 API
  • 如何流式传输 OpenAI 的完成 API?

    我想流式传输结果通过 OpenAI 的 API 完成 https beta openai com docs api reference completions 该文档提到使用服务器发送的事件 https developer mozilla
  • JS用正则表达式替换数字

    我有元素的标识符 如下所示 form book 1 2 3 我想要的是用其他值替换该标识符中的第二个数字 我将函数 match 与以下正则表达式一起使用 var regexp d d d 但它返回我包含的数组 1 2 3 2 因此 当我尝试
  • IE11不监听MSFullscreenChange事件

    我正在尝试使用 Bigscreen js 在 IE11 中使用全屏 但 IE11 不监听 MS FullscreenChange 事件 document addEventListener MSFullscreenChange functio
  • 淡出和循环一组 div 的最佳方式

    假设我有以下 div div class a You are funny div div class b You are smart div div class c You are cool div 最好的展示方式是什么div a持续 5
  • 将 javascript 整数转换为字节数组并返回

    function intFromBytes x var val 0 for var i 0 i lt x length i val x i if i lt x length 1 val val lt lt 8 return val func
  • 当用户单击链接时,如何记录 MixPanel 事件?

    当用户单击某种类型的链接时 我试图在 MixPanel 中记录一个事件 我正在使用 JQuery 不引人注意地完成此操作 据我所知 我需要添加一个回调函数 以便在记录事件后将用户带到 URL 这是我正在使用的代码 不幸的是
  • Nodejs mysql 获取正确的时间戳格式

    我在用着mysqljs https github com mysqljs mysql得到结果后sql我变得不同TimeStamp格式如下 created at Sat Jul 16 2016 23 52 54 GMT 0430 IRDT 但
  • 如何将函数内的捕获错误传递给父级

    我有这几行代码示例 想知道下面的逻辑到底如何 try var response child console log why here catch err console log should show this err function c
  • 使用 Flask/WTForms 和 React 进行 CSRF 保护

    有没有人成功地为使用 React 作为受控组件 提交到 Flask 后端 最好使用 WTForms 的表单实现了 CSRF 保护 我看过很多部分答案 其中一个是关于 Django 的 但找不到任何关于 Flask 的明确答案 我的大问题似乎
  • 打字稿 - 字符串'不可分配给类型'FC

    我收到以下错误 Type props PropsWithChildren lt amount number gt gt string is not assignable to type FC lt amount number gt Type
  • 单击引导分页链接时调用 jquery 函数

    我想在单击引导分页链接时调用 jquery 函数 假设我想从第1页遍历到第2页 应该调用一个jquery函数 我正在使用以下代码 但它不起作用 ul pagination on click li function alert page ch
  • 需要有关 React Js 的帮助

    我是 React Js 新手 我的代码无法正常工作 请看下面 这是我的脚本文件Main jsx 该文件由 React 编译 输出放置在 dist 文件夹下的 main js 文件中 var react require react react
  • 在 GWT 中,在任何主机页标记上添加事件处理程序

    我想为任何标签添加 MouseOver 事件处理程序 举个例子 我想为旧版 HTML 页面中的每个锚点页面添加事件处理程序 继GWT指南 http code google com webtoolkit doc 1 6 DevGuideUse

随机推荐

  • 错误 4:从“错误”中选择“消息”,其中“错误”= 1707(也是 1709)

    我使用 WiX 3 8 创建了一个 MSI 安装程序 安装时在 MSI 日志的最后出现此错误 Property C WIXUI INSTALLDIR VALID 1 Logging stopped 8 20 2014 19 15 03 No
  • Keycloak - Infinispan Redis 缓存存储

    目前正在以standalone ha模式设置keycloak集群 以便能够在docker swarm上运行 在 keycloak 中 用户会话缓存在嵌入式 infinispan 存储中 并且 infinispan 可以配置为跨集群的分布式缓
  • 函子定律是否证明了结构的完全保留?

    在文档中数据函子 http hackage haskell org package base docs Data Functor html以下两条被规定为函子法则 所有函子都应遵守 fmap id id fmap f g fmap f fm
  • makecontext 参数 #2 的 C++0x lambda

    我在将 C 0x lambda 函数作为第二个参数传递给makecontext 来自 ucontext h 的签名makecontext is void makecontext ucontext t void int 以前 我能够应用 C
  • 忽略模糊匹配并使用 javascript 添加精确的单词模式匹配

    我正在尝试为我的网站创建一个文本突出显示选项 但我想要精确的单词匹配而不是模糊的单词匹配 我的代码匹配所有类型的实例 并且存在一些区分大小写的问题 如果我们以 Jfiddle 为例 我只想添加这个词cancer 区分大小写不应该成为问题 并
  • 如何从维基百科中获取纯文本

    我想编写一个仅获取维基百科描述部分的脚本 也就是说 当我说 wiki bla bla bla 它将转到维基百科页面为bla bla bla http en wikipedia org wiki Bla Bla Bla 获取以下内容 并将其返
  • 如何在运行时获取NHibernate在代码中生成的SQL?

    我知道您可以通过将 NHibernate 生成的 SQL 连接到 log4net 或通过管道将其输出到控制台 show sql 选项 来查看 NHibernate 生成的 SQL 但是有没有办法在运行时在代码中获取生成的 SQL 我希望能够
  • Excel VBA - 网页抓取 - 获取 HTML 表格单元格中的值

    我正在尝试创建一个宏来抓取货物跟踪网站 但我必须创建 4 个这样的宏 因为每家航空公司都有不同的网站 我是 VBA 和网页抓取的新手 我已经整理了适用于 1 个网站的代码 但当我尝试将其复制到另一个时 我陷入了循环 我想这可能是我指代该元素
  • Excel VBA:将计算结果数组作为参数传递给函数

    我有一个接受数组的 VBA 函数 如果我向它传递一个引用 例如A1 A10 它不接受 公式 参数 例如A1 A10 1 or A1 A10 2 生成的单元格包含 VALUE 许多Excel函数都支持这一点 例如linest 我可以编写以下公
  • 如何解决 R Markdown (Knit)“‘closure’不可子集化”?

    我第一次尝试使用 RMarkdown Knit 来生成 pdf 默认文件 文件 gt 新建文件 gt R Markdown 运行良好 它显示编译时生成的 pdf 例如 运行以下代码 r cars summary cars 但是 如果我只是用
  • Meteor collection.insert回调问题

    根据 Meteor 文档 collection insert doc callback callback功能 选修的 如果存在 则使用错误对象作为第一个参数和 id 作为第二个参数进行调用 然后往下 在服务器上 如果您不提供回调 则插入块直
  • Unity单例代码

    我是新来的Unity http unity codeplex com 我正在尝试编写一些 Unity 逻辑来初始化和注册 解析 Email 对象的单例实例 以便它可以在多个其他对象中使用 下面的一个示例是 OperationEntity 因
  • Microsoft.ML 和 Xamarin

    Microsoft ML 在 Xamarin 中工作吗 我已经关注了许多教程和视频https dotnet microsoft com learn ml dotnet https dotnet microsoft com learn ml
  • 如何使用JAVA从html页面获取表格

    我正在开发一个项目 尝试从互联网获取财务报表并在 JAVA 应用程序中使用它们来自动创建比率和图表 我正在使用的网站使用登录名和密码才能进入牌桌 标签是 TBODY 但 html 中还有另外 2 个 TBODY 如何使用 java 将表打印
  • Matplotlib - 添加与轴底部对齐的标签

    我想向图表上的垂直线添加标签 本例中为洋红色线 TEXT TO GO HERE 问题是我不知道 Y 轴的最小值 因为该轴是自动的 并且 text 函数需要 x 和 y 值 我希望能够将文本与图的底部对齐 或者找到最小 Y 轴值 在本例中 m
  • 如何在应用程序中的所有类之间共享数组?

    我想共享一个数组 所有类都可以 获取 和 更改 该数组内的数据 类似于全局数组或多路访问数组 这如何通过 ActionScript 3 0 实现 有几种方法可以解决这个问题 一种是使用全局变量 如 unkiwii 的答案中所建议的 但这在
  • 在终端中运行每个命令后看到“致命:拒绝将 HEAD 指向 refs/ 之外”

    我已经几周没有使用终端了 在运行 Brew Upgrade 来升级 更新我的所有软件包后 我开始在运行每个命令后看到 致命 拒绝将 HEAD 指向 refs 之外 我不太熟悉终端或 Git 所以我不知道这意味着什么 请提供一些建议 场景来解
  • 错误:当我用 gradle 中的实现替换编译时(依赖项)

    我将 Android Studio 从 3 0 1 更新到 3 1 0 但更新后 当我构建我的项目时 它显示2 警告 1 用实现代替编译 编译支持将于 2018 年底结束 2 将 testCompile 替换为 testImplementa
  • 火花作业卡桑德拉错误

    每次我使用 cassandra 连接器在 Spark 中运行 scala 程序时都会收到此错误 Exception during preparation of SELECT count FROM eventtest simpletbl WH
  • 如何将 useRef 与 Typescript/Formik 一起使用?

    我正在通过一个ref属性到我的自定义 FieldInput 中 我使用它来验证表单的 Formik 然而 它给出了一些 Typescript 错误 例如 在我的函数中 const handleSubmitForm values FormVa