React Hook表单错误不适用于Chakra UI
。
React Hook是React提供的一种用于在函数组件中使用状态和其他React特性的方式。它可以帮助开发者更方便地管理组件的状态和生命周期。而Chakra UI是一个基于React的UI组件库，提供了一系列可重用的UI组件，帮助开发者快速构建漂亮的用户界面。
在React中，表单是一种常见的交互元素，用于收集用户输入的数据。通常情况下，我们会使用React Hook来处理表单的状态和验证。然而，对于Chakra UI来说，它已经提供了一套完整的表单组件和验证机制，可以方便地处理表单的错误。
Chakra UI的表单组件包括Input、Textarea、Checkbox、Radio等，它们都内置了表单验证的功能。通过设置相应的属性和回调函数，可以实现表单的校验和错误提示。例如，可以使用isRequired属性来指定某个输入字段为必填项，使用error属性来显示错误信息。
Chakra UI还提供了FormErrorMessage组件，用于显示表单字段的错误信息。开发者可以根据需要自定义错误提示的样式和位置。
总结起来，React Hook表单错误不适用于Chakra UI，因为Chakra UI已经提供了一套完整的表单组件和验证机制，可以方便地处理表单的错误。开发者只需要使用Chakra UI提供的表单组件和相应的属性、回调函数，即可实现表单的校验和错误提示。
相关·内容
1回答
如何使Formik错误消息与输入框对齐？
html、css、reactjs、formik、chakra-ui
如何使这些消息与输入框对齐？我不知道我该怎么做？Formik存在于ReactJS返回之外，所以我不能将它放在一个和样式中。错误信息与盒子边缘对齐的原因是什么？我是新手，Formik是Chakra文档中推荐用于表单处理的东西。
这是我的代码：
import React from 'react';
import { Text, Box } from '@chakra-ui/react'
import { Input } from "@chakra-ui/input"
import { Button } from "@chakra-u
浏览 7提问于2022-08-06得票数 0
2回答
Yup和Formik在使用Jest和React测试库测试时不验证表单
jestjs、react-testing-library、formik、yup、jsdom
我最近更新了Jest最新的28条。版本和我的单元测试停止工作，特别是在使用Yup和Formik验证我的表单并显示错误消息的测试中。如果我回滚Jest版本，它确实工作得很好。
下面是我的package.json依赖项
"dependencies": {
"@chakra-ui/icons": "^1.0.16",
"@chakra-ui/react": "^1.6.10",
"@emotion/react": "^11.5.0",
"@emoti
浏览 10提问于2022-07-16得票数 0
3回答
Chakra UI +表单错误类型
javascript、reactjs、typescript、react-hook-form、chakra-ui
我正在尝试使用ChakraUI和React Hook- form在TypeScript中创建我的表单。然而，我的错误给我带来了与打字稿有关的问题。我复制粘贴这个代码从脉轮ui/反应钩子模板提供在脉轮的网站。以下是代码：
import {
Box,
Heading,
FormErrorMessage,
FormLabel,
FormControl,
Input,
Button,
Text,
FormHelperText,
} from '@chakra-ui/react'
import React from 'react'
im
浏览 24提问于2022-07-28得票数 1
回答已采纳
1回答
带有Chakra UI的React-hook-form在NextJS中不显示验证错误消息
javascript、reactjs、next.js、react-hook-form
我一直在尝试使用React-hook-form和Chakra UI组件库在Next.js中实现一个登录表单，但是我不明白为什么尽管我完全遵循了React-hook-form文档，我的表单验证错误消息仍然不能显示。我有它的设置，用户名必须是2-30个字符的长度和密码必须至少是8个字符的长度；两个输入字段都是必需的。在有效的表单提交时，将弹出一个警报，表示成功提交。然而，对于无效的表单提交，错误消息应该显示在无效输入的下面，但事实并非如此。然而，我已经注意到，无效的输入字段将在提交时获得焦点。 这就是我所看到的：https://codesandbox.io/s/quirky-wave-jgpwf
浏览 20提问于2020-09-07得票数 1
回答已采纳
2回答
如何在脉轮UI中进行条件渲染？
reactjs、react-hooks、chakra-ui
我基于变量加载呈现两个Chakra UI组件：
{loading ? (<Spinner>) : (<Text color={useColorModeValue('gray.800', 'gray.400')>Hi</Text) }
但是IDE警告我这一点：ESLint: React Hook "useColorModeValue" is called conditionally. React Hooks must be called in the exact same order in every componen
浏览 13提问于2022-02-23得票数 1
回答已采纳
1回答
React Hook表单错误不适用于Chakra UI
reactjs、react-hook-form、chakra-ui
我正在尝试使用ChakraUI和React-Hook-Form来创建我的表单。但是，我的错误不起作用。我试着不使用脉轮ui，但仍然不起作用。下面是我的代码： import React from 'react'
import { useForm } from "react-hook-form";
import "./App.css"
import { Input } from "@chakra-ui/react"
import { Text } from "@chakra-ui/react"
import {
浏览 49提问于2021-01-05得票数 1
1回答
React多步表单提交和验证
javascript、reactjs、forms、validation
所以我在母版页中有一个窗体，它将呈现不同的文本框，或单选框，或日期选择器等。在每次单击下一步按钮和后退按钮时，它将转到下一组件或上一组件，并保存整个表单。 假设数据模型将如下所示{field：{textbox1: texbox1value}，{datepicker1: datepicker1value} 给出一个伪代码，或多或少如下所示。 ContainerPage.ts <form>
renderComponent(listOfComponent) // this will switch based on the link
<button back>
浏览 19提问于2019-09-19得票数 1
1回答
使用Chakra UI设置MDX文件的样式
reactjs、typescript、next.js、eslint、mdxjs
我正在尝试在next.js应用程序中使用Chakra UI设置markdown文件的样式。为此，我创建了以下MDXComponents.tsx文件： import { chakra } from "@chakra-ui/react"
const MDXComponents = {
p: (props) => <chakra.p fontSize="2xl" color="blue.500" {...props} />,
}
export default MDXComponents 然后，我将这个文件导入到_app.ts
浏览 46提问于2021-07-23得票数 0
回答已采纳
1回答
react-hook-form多步表单问题
javascript、reactjs、forms、react-hook-form
我正在用react-hook-form实现一个多步骤表单，我的问题是当我返回到上一页时，输入字段没有用表单数据重新初始化。
我使用来自react-hook-form的<FormProvider />组件将表单数据注入到页面中，并且我的input组件是使用来自useFormContext()钩子的register方法注册的
const CreateAccount = () => {
const [currentStep, setCurrentStep] = useState(0);
const methods = useForm<FormData>({
浏览 3提问于2021-07-21得票数 1
2回答
React Hook表单和React Select未按预期工作
reactjs、react-select、react-hook-form
根据文档(https://react-hook-form.com/get-started#IntegratingControlledInputs)，我正在尝试使用Controller包装器组件在React Hook窗体中包装React Select <Controller
name="ShiftCaptain"
control={control}
render={({ field }) => (
<Select
浏览 25提问于2021-10-12得票数 0
回答已采纳
2回答
无法将表单元素集中在模态上，而使用react钩子形式打开。
reactjs、react-hook-form、chakra-ui
我正试图解决一个看似直截了当的问题。我想在一个模式打开的时候聚焦一个表单元素。
由于react-hook-form没有为“参考”表单提供直接句柄，所以我尝试使用useEffect钩子和react-hook-form的howngrown setFocus函数，但我一直看到错误：
s.focus不是一个函数
码
->
import { useEffect } from "react";
import { useForm } from "react-hook-form";
import "./styles.css";
import {
浏览 18提问于2022-05-22得票数 1
回答已采纳
1回答
尝试在不使用eval()的情况下构建React中的泛型表单组件
javascript、reactjs、forms
我目前正试图为我的React应用程序编写一个通用表单组件。我知道那里有很多很棒的图书馆，但在这一点上，它们对我来说似乎都是过头了。
这里我的主要目标是拥有一个可以使用的<BasicForm>组件，方法是将submit函数作为props传递，并将输入字段和按钮作为children传递，并为每个字段提供验证要求。
我的<BasicForm>组件应该处理表单state、onChange、onBlur、onSubmit等，还应该处理验证(基于我作为children添加的每个输入类型)。
其动机是，每次需要创建新表单时，我都会感到重复，必须一次又一次地管理输入、验证、onChan
浏览 1提问于2019-01-29得票数 2
回答已采纳
2回答
响应钩子- useEffect缺少依赖项警告
javascript、reactjs、react-hooks
我不确定通过在依赖数组周围使用useEffect，这是否是一个有效的警告，似乎每当useEffect中的变量、方法或分派发出警告时，React都缺少依赖项：“active”、“retrieveUser”和“分派”。或者包括它们，或者删除下面示例中的依赖数组，如果我只是将它保留为空白数组来执行componentDidMount功能
useEffect(() => {
setActive(active);
await retrieveUser(param1, param2);
dispatch(someAction);
}, []). // warnin
浏览 2提问于2020-08-01得票数 1
回答已采纳
1回答
警告:从submitForm()错误捕获了一个未处理的错误：
reactjs、urql
我正在使用react、nextjs和typescript启动一个项目，我试图向后端提交一个表单，但是当尝试使用该函数调用使用@ urql-codegen生成的函数时，我得到了以下警告: formik.esm.js:925警告:从submitForm()错误捕获了一个未处理的错误:无效钩子调用。钩子只能在函数组件的主体内调用。这种情况的发生有以下原因之一：
您可能有React的不匹配版本和呈现器(例如React )，您可能正在违反Hooks的规则，您可能在同一个应用程序中有多个React副本。
和查询，但查询不会触发
我的错误可能是我不知道该怎么做
下面的代码
import React f
浏览 1提问于2020-12-13得票数 0
回答已采纳
2回答
是否在状态更改时响应丢弃排队事件？
javascript、reactjs、forms、validation、dom-events
我正在用简单的验证制作一个React表单组件。每个字段都在模糊上进行验证，并且表单具有一个简单的onSubmit函数。布尔值存储在字段是否应该显示错误消息的状态中，并在验证期间更新。
除了字段的onBlur和表单的‘`onSubmit同时被触发时，一切都正常工作。也就是说，我在字段中键入某项内容，然后立即单击submit按钮。
首先执行onBlur，如果不更改验证状态，则按预期执行onSubmit。但是，如果onBlur更改了状态，则onSubmit函数永远不会被称为。
因此，我的问题是:在组件中设置状态是否清除了任何排队事件，是否有可能解决此问题？
下面是我的代码的简化版本：
class S
浏览 1提问于2016-04-09得票数 1
2回答
用Jest对Chakra UI进行单元测试
reactjs、jestjs、react-testing-library
目前，我正试图对我的应用程序进行单元测试，该应用程序是用创建-React和类型记录构建的，它是用chakraui设计的。Chakrui包含一个组件ThemeProvider，它必须将整个应用程序包装成这样。
这是我的index.tsx文件
import React from "react";
import ReactDOM from "react-dom";
import "./index.css";
import App from "./App";
import * as serviceWorker from "./
浏览 11提问于2020-09-11得票数 5
回答已采纳
1回答
检查网站是否存在，如果不存在，则在表单输入字段下显示错误消息。
javascript、node.js、reactjs、react-hook-form
我是相当新的JS & React，我使用的表单，我必须检查网站输入到我的表单中的网站字段是否存在。如果网址不存在，我必须将错误信息显示为网站字段下的“网站不可用”，该信息将使用FormError组件呈现。
(这是一个名字字段，但是由于我使用的是一个通用的TextField组件，所以它也应该在这里工作)
因此，我使用“ URL -存在”包来测试网站网址是否存在，如果该网站不存在，它应该会生成一个错误作为“网站不可用”。
我用这段代码来实现。
const websiteCheck = (value) => {
let str = value;
let message
浏览 3提问于2021-05-27得票数 1
回答已采纳
4回答
用useEffect进行强制重呈现
reactjs、react-hooks
import * as React from "react";
// import "./style.css";
export default function App() {
let [width, setWidth] = React.useState(window.innerWidth);
let [height, setHeight] = React.useState(window.innerHeight);
React.useEffect(() => {
console.log("us
浏览 14提问于2022-11-17得票数 2
2回答
使用react (UseRef)-how将类组件转换为功能组件以避免“未定义”错误
javascript、reactjs、typescript
我正在尝试将作为类组件工作的代码片段转换为功能组件(使用react奖励库)。
班级组成(工作)：
import { Checkbox } from "@chakra-ui/react";
import React, { Component } from "react";
import Reward from "react-rewards";
const config = {
fakingRequest: false,
angle: 90,
decay: 0.91,
spread: 100,
star
浏览 1提问于2021-02-01得票数 2
回答已采纳
1回答
form库和React参考
reactjs
具有这样一个简单的react-hook-form示例表单：
import React from 'react';
import { useForm } from 'react-hook-form';
export default function ReactForm() {
const {
register,
handleSubmit,
formState: { errors },
} = useForm();
const onSubmit = (data) => console.log(data);
let
浏览 4提问于2022-03-15得票数 0
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
即时通信 IM
ICP备案
对象存储
实时音视频活动推荐
腾讯云开发者
