问题标签 [react-hook-form]
For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.
reactjs - 如何将寄存器传递给 React Hook Forms Factory 组件?
我正在尝试创建一个这样的“工厂”:这有效:
但是,当我将输入包装在组件中的函数中时,它不起作用:
有任何想法吗?
reactjs - 将代码分成更小的组件破坏状态
我有以下代码:
https://codesandbox.io/s/react-datepicerhook-u2vv1
如您所见,有一个工作日期选择器和一个非工作日期选择器。这两个日期选择器非常相似,所以我想制作一个只将参数作为名称的新组件。但是,在我的非规范化状态下,我的状态出现了问题。任何指针为什么以及如何解决它?
reactjs - React 形式:循环通过 event.target 创建对象
我有一个相当长的表单要提交,并且想创建一个对象,其中包含作为键的输入名称和作为值的输入值。我尝试遍历event.target
and event.target.elements
,如下所示:
但是我得到了关于循环循环对象值的 TypeError。循环这些值可能不是正确的方法,正如我通过登录控制台看到的 event.target 和 event.target.elements 实际上包含 html 表单元素。我不知道如何获取表单数据。我的表格如下所示:
我之所以使用这种方法,是因为它是我在服务器端通过获取表单数据并循环req.body
输入的方式。但是,现在我已将 ejs 模板更改为 React,我无法发送表单数据。这就是为什么我试图直接在 React 句柄方法中循环遍历这些值。我无法通过 fetch 将表单数据发送到我的节点 + 快递服务器。req.body
总是最终是空的。我认为这是因为我正在使用body-parser并且我正在发送一个new FormData()
(不支持?):
但是,如果我先创建对象,然后使用 fetch 发送它,它就可以工作。那么,有谁知道如何遍历表单元素或如何解决获取问题?谢谢 :))
reactjs - 如何在表单的“外部”反应中验证表单
我正在React中构建一个用于创建烹饪食谱的组件。我正在使用react-hook-form来验证表单。我的容器上有两个表格。一种用于添加成分,具有三个输入字段(名称、数量、单位),另一种用于步骤 - 具有一个输入字段。当我添加成分或步骤时,我正在验证输入数据是否正确,并阻止将项目添加到列表中,如果数据不正确,列表位于此表单下方。到目前为止,一切都很好。但我的问题是,我需要使用页面底部的通用“添加配方”按钮来访问这两个表单的验证过程。例如,如果我将那些需要的输入字段留空,我也想通过按下“添加配方”按钮来检查,而不仅仅是提交这两个“子表单”。这是要点的链接:. 有人可以看看我的代码并给我一个建议。
PS.:我创建了 FormGroupArray 组件,用于动态添加 FormGroup 元素数组(我正在使用 react-bootstrap)。
javascript - Type incoherence between the register() function of react-hook-form and the native input types
I'm working on a React project using TypeScript and react-hook-form. In some place I use the given function register() that have to be used like that (according to the official documentation):
The problem I'm facing here is that this function is typed in such a way that it return void
:
But the attribute ref
of the native input
tag has to be of type:
So naturally TypeScript throws me this error:
Type 'void' is not assignable to type 'string | ((instance: HTMLInputElement | null) => void) | RefObject | null | undefined'
Do you have an idea of how I can use this library while respecting the types? Is this a mistake on the part of the library itself?
reactjs - 将表单输入的值传递给 React 中的兄弟组件
我创建了一个表单,当用户进行选择时,我想将表单输入的值实时传递给兄弟组件。
我正在使用 react-hook-form 并且能够成功地使用watch查看用户输入的值,但我只知道如何将其传递给孩子,而不是兄弟姐妹。
应用程序.js
这是家长
表单.js
这是孩子。
消息.js
这是孩子的兄弟姐妹。我想将值传递给这个组件
我对 React 很陌生,所以很难思考如何做到这一点。Wny 指导将不胜感激。
非常感谢,
凯蒂
reactjs - 使用 redux 和异步请求反应钩子形式
我将React Hook Form与 redux 一起使用。
在一个组件中,我首先必须执行一个操作,将请求发送到后端并在 Redux 中分配结果。
所以在组件中我一开始没有表单的值。仅当数据已在 Redux 中分配时。
我现在如何使用 Redux 中的值填充字段?
问题是第一次渲染时,baz还没有可用,defaultValues只设置了{}。
我发现这个带有钩子形式的异步请求,但是 baz 还没有在承诺中设置,因此我不能在reset(baz)
那里做。
如何使用现有值设置表单中的字段?
reactjs - 表单验证和错误消息不起作用
我目前正在为一个应用程序开发几种表单,并选择使用Material UI和React Hook Forms来构建它们。基本功能正在运行,这意味着我只能在填写所有必需的输入并且获得所需的数据时才能继续。
不幸的是,我无法使用React Hook Form附带的表单验证或错误消息显示。它仍在使用Material UI验证,尽管我尽可能接近文档。
这是我希望能够做到的:
- 定义输入的最小和最大长度
- 输入密码输入的正则表达式模式
- 显示React Hook Form整洁的错误信息
有些逻辑有效,有些则无效。你能帮我弄清楚为什么吗?先感谢您!