如何使用react钩子验证表单？

文章/答案/技术大牛

发布

1回答

javascript、reactjs、react-hooks

如何使用react钩子验证表单？我使用了类组件，它工作得很好，但现在决定使用带有钩子的函数组件，并且不知道验证表单的最佳方法。onValueChange} /> </form>}

浏览 13提问于2019-08-26得票数 0

回答已采纳

1回答

我对react-hook-form有一个问题，简单地“触摸”一个字段(点击它，然后在其他地方点击)就会导致formState.isDirty为真。但是，作为一个动态表单，我需要从服务器检索要加载到表单中的对象，所以我看不到解决这个问题的办法。我所希望的是，只要值没有实际改变，formState.isDirty就保持为假。对于更复杂的组件(比如react-select)，我自己调用register(‘无论什么’)就没有这个问题，只有我使用ref={register}的原生超文本标记语言输入才有这个问题。im

浏览 8提问于2020-11-22得票数 0

回答已采纳

1回答

如何检查或查询Yup模式？

javascript、reactjs、yup

我正在创建一个表单库，使用React + Material +react-钩子+ yup。我的组件的一个参数是用于验证表单值的yup架构。 example: yup.string(),}; 如何查询架构以知道需要哪个字段

浏览 4提问于2022-08-16得票数 0

回答已采纳

1回答

即使在选择数据报警器中的值之后，也可以响应DateTimePicker显示所需的错误

reactjs、react-native、react-hooks、react-hook-form、yup

React正在显示必需的错误，即使在选择了DatePicker中的值之后： DateTime:Yup.date

浏览 7提问于2022-06-12得票数 0

3回答

我想验证每次提交按钮时都要注册步骤

javascript、reactjs、react-redux

我要验证每一步提交按钮。

浏览 2提问于2021-11-29得票数 0

回答已采纳

1回答

我不明白还原剂和反应钩式的区别。有什么关系？

reactjs

我不明白还原剂和反应钩式的区别。有什么关系？(我只是有点意识到，两者都是管理系统状态的工具。)

浏览 3提问于2022-04-15得票数 -3

5回答

如果输入在material对话框中，react钩子窗体的setValue方法不起作用。

reactjs、material-ui、react-hook-form

我尝试使用react钩子形式来验证输入。但是我发现，如果输入放在Material的对话框组件中，那么react钩子表单的setValue就不能像预期的那样工作，但是当我删除dialog组件时，它就能工作了。该值将从服务器中检索，因此我不能使用react钩子表单的defaultValues。我尝试过使用useState来控制输入值，但是还有另一个问题。

浏览 0提问于2019-12-30得票数 18

回答已采纳

1回答

用useLazyQuery钩子进行异步验证

apollo-client、react-hook-form

如何使用阿波罗客户端的钩子处理反应钩子形式的字段级异步验证？据我所知，useLazyQuery钩子是在某些操作(如onClick)上初始化GraphQL请求的唯一方法。不幸的是，这个钩子返回void，并强制我使用data变量来获取值。但。react-钩子表单要求在asyncValidation中返回一个asyncValidation值。如何处理这类案件？

浏览 2提问于2021-07-01得票数 1

回答已采纳

1回答

从功能组件公开一个函数- React

reactjs、react-hooks

验证通常会在表单中使用状态变量。现在，我想不出一种公开它的方法，无论哪个组件使用form，它都可以像下面这样简单地验证表单 const isFormValid = validateForm();const Form = () => { const isEmpty = () => {} con

浏览 3提问于2020-03-31得票数 2

回答已采纳

2回答

React钩子式输入字段匹配验证最佳实践

reactjs、react-hook-form

在处理React钩子表单时，做输入字段匹配验证时的最佳实践是什么？例如，当匹配email输入时，等等。在查看电子邮件匹配验证时，使用React钩子表单在尝试通过验证方法将错误消息与“耦合元素”分离时发现了一个问题。ref只接受一个用于React钩子表单register的参数，而需要使用useRef来访问用于值匹配的current.value，如下

浏览 4提问于2020-03-26得票数 7

回答已采纳

1回答

如何捕捉响应钩子形式的验证错误

javascript、reactjs、validation、react-hook-form

我正在使用react，类型记录和电子邮件JS库。我正在使用react钩子表单库和yup来验证表单。我把handleSubmit(onSubmit)()放在了一个try cat

浏览 10提问于2022-08-15得票数 0

1回答

Package-global config NPM库

javascript、reactjs、typescript、npm、configuration

我目前正在为react开发一个库，我不知道如何在技术上实现我想要的功能。基本上它是一个表单验证库，所有的配置都是钩子的一个参数。现在，我没有实例对象，因为我只是调用了函数/react钩子。然后，我有了在window对象中创建一个名称空间的想法，配置就在那里。然后，我的钩子可以始终检查窗口“名称空间”中是否有配置，以便一次配置或覆盖所有表单。另一种可能更具react的方式是为配置创建一个上下文。但老实说

浏览 20提问于2021-09-16得票数 0

回答已采纳

1回答

为什么要使用yup验证？

react-hook-form、yup

由react钩子表单提供了一个验证方法。然而，有些开发人员有时使用yup验证。我的想法似乎具有在前端和后端一起使用模式验证的优势。我想知道这里面还有什么别的吗？

浏览 15提问于2022-04-17得票数 0

回答已采纳

2回答

使用嵌套钩子更新状态

javascript、reactjs、react-hooks

我试图弄清楚如何使用嵌套钩子来更新父组件中的状态。最近我了解到钩子基本上遵循相同的setState()异步更新模式，但是我很难找到我的war。我有三个定制钩子：useValidateRuleOne：用于验证特定规则的自定义钩子。useValidateRuleTwo：用于验证另一个特定规则的自定义钩子。我希望在u

浏览 0提问于2019-04-01得票数 4

回答已采纳

1回答

如何以反应钩子的形式进行验证？

reactjs、react-hooks、next.js

我尝试使用react钩子形式的v7进行验证，但是有几个错误。首先，我尝试了连接到Reactstrap，但这是不可能的，因为v7。然后我把它改变为反应-引导。我的第一个问题是如何做它，首先我做验证，如果它是正确的，然后我获取日期到API (我使用next的和联系人表单工作)。

浏览 6提问于2022-06-18得票数 0

1回答

当输入为空时，响应钩子形式验证。与Yup.matches的冲突

react-hook-form、yup

我用的是反应钩表和验证表。字段允许用户提交表单而无需填写此字段，但如果用户填写此字段，则用户只能填充与regex匹配的字符串(我的regex为检查个人名称)。我遇到的问题是，当用户提交表单而没有在文本字段中输入任何值时，react钩子表单一直在验证并显示错误(如果我使用Formik，则不会发生这种情况，但出于性能原因，我必须使用react钩子表单)。代码框链接： import <e

浏览 7提问于2022-11-05得票数 0

回答已采纳

1回答

如果输入字段卸载react钩子表单，如何删除验证架构

reactjs、react-hook-form

我有一个表单，它将使字段具有条件。我使用react钩子表单来验证表单。这是我的代码：我希望如果用户不选中复选框，用户仍然可以提交没有字段firstName的表单。我尝试使用shouldUnregiste

浏览 12提问于2022-11-11得票数 0

回答已采纳

1回答

使用React钩子表单进行表单验证

reactjs、react-hooks、react-hook-form

我想在调用onClick函数之前验证我的表单。我已经使用react-hook-form组件来实现表单验证。然而，它似乎不起作用。即使表单是空的，如果我单击按钮，也会创建空组件。import AddIcon from &

浏览 3提问于2020-06-24得票数 0

5回答

如何在蚁群设计或材料用户界面中使用反应钩式？

reactjs、material-ui、antd、react-hook-form

我正在尝试使用react钩子表单库来验证表单。当我使用ant设计或材料UI呈现视图时，它不能正常工作。

浏览 0提问于2019-11-13得票数 12

回答已采纳

1回答

React Hook Form V7 + Material UI 5:未验证默认值

reactjs、react-hook-form

我已经使用Material UI5配置了一个自动完成和一个DatePicker组件。如何添加react钩子表单支持？helperText={errors.itemsId && "item required"} /> /> 所附的codesandbox示例与react-hook-form但是使用react钩子</e

浏览 26提问于2021-04-13得票数 2

回答已采纳

点击加载更多