如何在react-hook-form中只输入数字
在react-hook-form中只输入数字，可以通过使用内置的验证规则和自定义验证规则来实现。
首先，安装react-hook-form库并导入所需的依赖项：
npm install react-hook-form然后，在你的组件中引入react-hook-form并创建一个表单：
import React from 'react';
import { useForm } from 'react-hook-form';
function MyForm() {
const { register, handleSubmit, errors } = useForm();
const onSubmit = (data) => {
console.log(data);
};
return (
<form onSubmit={handleSubmit(onSubmit)}>
<input
type="text"
name="numberInput"
ref={register({
required: '请输入数字',
pattern: {
value: /^[0-9]+$/,
message: '请输入有效的数字',
},
})}
/>
{errors.numberInput && <p>{errors.numberInput.message}</p>}
<button type="submit">提交</button>
</form>
);
}
export default MyForm;在上面的代码中，我们使用了useForm钩子来初始化表单，并使用register函数将输入字段与验证规则关联起来。在这个例子中，我们使用了两个验证规则：
required：确保输入字段不为空。pattern：使用正则表达式验证输入字段是否只包含数字。
如果验证失败，将显示相应的错误消息。
这是一个基本的示例，你可以根据自己的需求进行扩展和定制。关于react-hook-form的更多信息和用法，请参考官方文档。
注意：本回答中没有提及腾讯云相关产品和产品介绍链接地址，因为该问题与云计算品牌商无关。
相关·内容
3回答
我为我的输入组件使用了react-hook-form，但是有一个问题。在一些文本字段中，例如，用于验证文本字段只接受数字，我不知道如何做，对于普通的textInput，我们可以使用正则表达式，例如 const [numberInput, setNumberInput] = useState("")
function onTextChanged(value) {
setNumberInput(value.replace(/[^0-9]/, ""))
} 并将该函数和钩子值分别放在onTextChange和value上，我在react- hoo
浏览 68提问于2021-09-29得票数 1
回答已采纳
我使用react-hook-forms作为我们的应用程序表单的功能/验证，并使用MUI/Material作为我们的组件库。如果输入具有required属性集，则MUI将自动将required附加到输入标签中，但是，当我们将required属性添加到输入中时，HTML5表单验证优先于使用rules支柱进行react-hook-form验证。
我们如何将这两个概念结合使用，以便MUI在所需字段上附加*，但是react-hook-form的rules验证被应用而不是HTML5 5的验证？
浏览 20提问于2022-11-22得票数 0
2回答
如何在反应本土化的形式？
、、、
我想用表单钩子在本机反应中创建一个表单。这对我不管用。
我已经用以下命令安装了钩子表单：
npm install react-hook-form
这是我的密码：
import React from "react";
import { useForm } from "react-hook-form";
const InscriptionScreen = () => {
return (
<form>
<input type="text" placeholder="Email" nam
浏览 2提问于2020-04-26得票数 0
回答已采纳
我正在使用react-hook-form创建一个4位数字的输入，它不允许用户输入字母或字符，但它忽略了maxLength值。我可以得到一个只允许数字的输入，但我不能限制长度。 以下是我的输入： <input
id="fourNumbers"
required
type="number"
name="fourNumbers"
ref={register({ required: true, pattern: /[0-9]{4}/ })
浏览 41提问于2021-05-04得票数 0
一旦一个组件被触摸，然后用户清除输入，默认的行为就是错误继续显示。当输入在触摸后被清除时，如何才能使错误消失？
下面的代码是文档的摘录。
import React from "react";
import { useForm } from "react-hook-form";
export default function App() {
const { register, formState: { errors }, handleSubmit } = useForm();
return (
<form onSubmit={hand
浏览 1提问于2021-05-16得票数 1
回答已采纳
我有困难，使用反应钩形式的材料-用户界面。
我准备了一个。
import { TextField } from "@material-ui/core";
import React from "react";
import { useForm } from "react-hook-form";
import "./styles.css";
interface IMyForm {
vasarlo: string;
}
export default function App() {
const {
handleSub
浏览 6提问于2021-04-08得票数 6
回答已采纳
我有一个连接到TextField的react-hook-form元素。当我关注这个输入时，我打开了一个国家列表，这样我就可以选择一个国家通过setValue函数从react-hook-form将其电话代码填充到字段中。
一切正常，国家代码确实出现在字段中，但通常在手动输入文本时向上移动的标签不会向上移动。
下面是它看起来的样子
浏览 2提问于2021-07-22得票数 7
回答已采纳
1回答
我有一个带有名为dates的对象的数组，例如数组中的一个对象：{id: 9898, date: 10/06/2020}。
在数组中，将有许多具有相同id的对象，我希望在TextField中用相同的id映射日期，请参见下面的代码。我怎样才能做到这一点？
任何帮助都是感激的，谢谢！
import React, { useEffect, useState } from 'react';
import { useForm } from 'react-hook-form';
import { TextField, Box, Button, Tooltip }
浏览 3提问于2020-04-06得票数 0
回答已采纳
如果输入一个字符并移除焦点，Textfield就会中断。我猜我的代码中所显示的掩码问题
import { TextField } from "@material-ui/core";
import { IMaskMixin } from "react-imask";
import { useForm } from "react-hook-form";
const IMaskPhoneInput = IMaskMixin(({ ...props }) => {
return <TextField {...props} /&
浏览 3提问于2021-04-27得票数 0
我想使用react-hook-form验证输入。但我无法在寄存器.how中发送验证规则来解决此问题 https://codesandbox.io/s/react-hook-form-smart-form-component-vpsc0
浏览 9提问于2020-04-29得票数 1
回答已采纳
我想要有条件地禁用基于另一个输入值的输入。常见的用例是我们有一个复选框，我们需要禁用/启用同一表单中的另一个输入。我如何使用react-hook-form实现它？我想要禁用，而不是关于提交时的验证。 目前，我使用带有react-hook-form的FormControlLabel (material-ui)。任何帮助都将不胜感激。 更新！下面是我的想法的一小段演示代码 import { Controller, useForm } from "react-hook-form";
import { FormControlLabel, Checkbox } from "@m
浏览 36提问于2021-09-18得票数 1
回答已采纳
我目前正在尝试测试我的表单，它有一些非常嵌套的组件和复杂的逻辑。因此，与其实际上模拟userEvents，然后提交表单，不如模拟handleSubmit的返回值。
这是我的反应成分：
import React from 'react';
import { FormProvider, useForm } from 'react-hook-form';
export const MyForm = (): JSX.Element => {
const methods = useForm<{ name: string }>();
c
浏览 15提问于2022-05-25得票数 0
1回答
我在react-hook-form中使用Material的自动完成输入，如下所示：
import React from "react";
import {Controller} from "react-hook-form";
import {Autocomplete} from "@mui/material";
export const ControlledAutocomplete = ({
options,
浏览 3提问于2021-12-20得票数 1
回答已采纳
我目前在我的表单中使用Formik，但正在考虑改用react-hook-form。我关心的一个问题是，输入的DOM状态与预期的DOM状态不同。一个例子是使用type="number"的输入，它在DOM级别的value是一个字符串。所以我可能想把一个字符串映射到一个数字。在Formik中： <input
type="number"
value={formikProps.values.myNumericField ?? ''}
onChange={(event) => {
formikProps.setFieldVa
浏览 31提问于2020-11-28得票数 1
回答已采纳
我在我的应用程序中使用了react-hook-form，并在react-hook-form中使用了autocomplete。 我的自动完成有像1988,1987,1986这样的下拉值，我想我不需要为这个自动完成使用onchange事件，当我从下拉列表中选择1988时，这个值通过react-hook-form传递，而不使用onchange事件。然而，当我从autocomplete中选择一个值并提交react-hook-form时，0被作为参数传递，而不是实际的值。 我知道我们可以使用onChange事件并将选定的下拉值设置为状态，但是我并不打算对表单变量进行任何状态管理，因为react-hoo
浏览 28提问于2021-07-31得票数 1
回答已采纳
我在react-hook-form库中使用KendoReact组件时遇到了问题： <Controller
as={Input}
name="firstName"
control={control}
defaultValue="type something here"
/> Stackblitz sample here react-hook-form sample使用MaterialUI组件来显示第三方库集成，并且看起来工作正常。在使用Kendo输入组件时，在输入控件中键入任何内容都会导致控件显示[object Object]
浏览 28提问于2020-04-24得票数 1
回答已采纳
我正在使用react-hook-form，我想要传递一个富文本编辑器作为输入。我在下面包含了草稿组件，它是一个标准的RichText -js实现，但是当我单击submit时，我得到的是"draft: undefined“而不是编辑器中的文本
index.js从‘react-hook-form’导入{ useForm，控制器}；
const JobPostForm = () => {
const { register, handleSubmit, errors, control } = useForm({
});
return(
<
浏览 0提问于2020-07-28得票数 1
2回答
我试图将react-hook-form添加到reactstrap表单和输入中，但看起来包之间存在冲突。
import React, { useState, useEffect } from 'react';
import { useForm } from "react-hook-form";
import {
Button,
Form,
Label,
Input
} from 'reactstrap';
import { FormControlLabel, Checkbox, FormGroup } from &#
浏览 2提问于2021-03-11得票数 0
回答已采纳
我正在使用useCombobox钩子使用DownshiftJS创建一个自动完成组件。一切都进行得很顺利，并使用react-hook-form进行了测试。不幸的是，我遇到了一个问题，触发HTMLFormElement.reset()方法的react-hook-form中可用的重置函数不会触发降档组件中的任何状态/输入更改。 这意味着当用户从列表中选择一个项目(这会触发Autocomplete中的一个事件)，单击reset按钮，然后再次单击输入时，该列表将被筛选为只显示以前选择的项目。这是因为所选项目存储在selectedItem内部状态中。 如何让reset方法在Autocomplete组件中
浏览 16提问于2020-10-01得票数 1
回答已采纳
我有一个编辑Product的页面，props值来自API，它来自父组件。如何将此值设置为我的Datepicker输入？因为来自react-hook-form的react-hook-form是在自定义钩子中的第一个呈现处缓存的，所以我得到了null。
const ProductEdit = (props) => {
const { product } = props;
const { control, register, handleSubmit, formState: { errors } } = useForm();
........
<Controller
浏览 3提问于2021-09-02得票数 1
回答已采纳
1回答
更新react钩子表单中的错误
、、、、
所以我创建了一个自定义的输入包装器，它从react-hook-form中接收了几个道具。
这是我的文本输入
import { useForm } from 'react-hook-form'
const {
register,
formState: {
errors
},
} = useForm();
<TextInput
id={'password'}
errors={errors}
register={register}
options={{
minLength: {
message:
浏览 2提问于2021-06-04得票数 0
我试图使用react ref，并使用react-hook-form库定义一个简单的表单输入，如下所示(基于)。
下面是我正在处理的代码摘录：
<input id="lastName"
{ ...myRegister('lastName', {
required: true,
onChange: (e) => {
console.log(e.target.value);
},
ref: (input) => {
console.log("lastName ref...")
textIn
浏览 6提问于2022-03-16得票数 -1
回答已采纳
如何使用React-Hook-Form在输入中实现set focus，这就是他们的常见问题“如何共享引用用法”的代码，这里是https://www.react-hook-form.com/faqs/#Howtosharerefusage import React, { useRef } from "react";
import { useForm } from "react-hook-form";
export default function App() {
const { register, handleSubmit } = useForm();
浏览 103提问于2020-09-08得票数 8
为了验证react-hook-form中的输入字段，我执行如下操作 <input type="text" id="name" ref={register({ required: true, maxLength: 30 })} /> 但那是在提交时..从远程api端点获得响应后，我需要显示一些验证消息。在同一个输入字段中...
浏览 19提问于2020-10-15得票数 0
回答已采纳
我一直在尝试使用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
回答已采纳
我想使用react-hook-form在输入字段中提供默认值。首先，我从API端点检索用户数据，然后将状态users设置为该用户数据。然后，我将状态users传递给useForm()的defaultValues。
import React, { useState, useEffect } from "react";
import { useForm } from "react-hook-form";
import axios from "axios";
function LoginFile() {
const [users, setUser
浏览 4提问于2020-10-12得票数 15
回答已采纳
我正在使用react adminv4.alpha 2来测试我们当前应用程序中的最新功能。
我不能让我们自己的自定义输入工作。
我从@Fran ois Zaninotto那里读到了这个很好的答案，但这是给ra v3使用的“旧”react-final-form，在WIP文档中找不到什么：。
useField或Field在react-hook-form中不存在。我们应该用register吗？
非常感谢!
浏览 5提问于2022-01-31得票数 0
1回答
我第一次尝试使用react-hook-form ()。我不知道如何用redux将它们组合成反应组件。
import React from 'react'
import useForm from 'react-hook-form'
export default function SampleForm() {
const { register, handleSubmit, watch, errors } = useForm()
const onSubmit = data => { console.log(data) }
consol
浏览 1提问于2019-12-06得票数 5
回答已采纳
我正在使用react-hook-form库和yup来验证输入字段： const { handleSubmit, register, errors } = useForm({
mode: 'onBlur',
validationSchema: Yup.object({
name: Yup.string().max(6, 'Max 6 chars').required('Required boy'),
pass: Yup.string().min(6, 'Min
浏览 45提问于2020-08-11得票数 1
回答已采纳
2回答
我正在尝试使用外部工具在gedit中以交互方式直接运行我的C++程序。
我已经编写了一个Python工具来编译它，但是当使用os.system("./program.out")时，程序的所有输入都被设置为0(但是它可以正确地执行)。
由于使用Python以交互方式执行它会相当困难，因此我正在寻找另一种解决方案。
#!/usr/bin/env python3
import os
filename = os.getenv("GEDIT_CURRENT_DOCUMENT_NAME")
fout = "%s%s"%(filename[:len(fil
浏览 17提问于2019-10-26得票数 1
回答已采纳
我在recommended中是新手，有些人建议我在表单中使用react-hook-form。我不知道这是否相关，但我使用尾风CSS。这是我的问题：
当我在输入的末尾解析ref = {register}时，什么都不会呈现。没有ref = {register}，一切都工作得很完美。如果有人能帮忙，我会很高兴的。
这是我的代码：
import './App.css';
import React from "react";
import { useForm } from "react-hook-form";
function App() {
con
浏览 4提问于2022-08-07得票数 1
回答已采纳
我有一个可重用的表单。根据使用的位置，此表单可以有不同的输入。我将control作为支柱从父组件(包含所有逻辑)传递给any类型，但是我希望有一个更严格的类型。怎么做？
我的意思是，在一个组件中，一个输入可以像{name: ""}，另一个可以是{face: "", address: ""}，那么如何在CreateForm中键入控制支柱，以便它能够与不同的输入一起工作？
包含输入逻辑的父组件：
type CreateFaceInput = {
name: string;
cover: string;
};
浏览 2提问于2022-11-29得票数 0
回答已采纳
我有组件： const FormComponent = () => {
const { register, handleSubmit, errors } = useForm();
const [val, setVal] = useState("");
const handleSubmitForm = () => console.log("send!");
const handleChange = (e) => {
setVal(e.target.value);
};
return (
<f
浏览 40提问于2021-01-28得票数 2
我在一个react-hook-form中使用了create select组件。我尝试了react-select和creatable-react-select两者，我在这个问题的上下文中体验到的行为是相同的。
使用最新的react-hook-form (7.6.1)，当有错误绑定到字段时，我不能将字段设置为焦点。
当我使用一个老版本的react-hook-form时，我可以让这个行为像预期的那样工作。
因为我想让这个行为在最新的react-hook-form中工作，对于第一个例子中的问题有什么建议吗？
浏览 3提问于2021-05-19得票数 0
回答已采纳
第一次张贴在这里，所以我提前道歉，如果我错过了重要的东西，请告诉我，如果是这样的！
我正在编写一个控制台应用程序，该应用程序在不同的层次上有一个带有几个不同选项的菜单，我正在尝试创建一个函数，当用户在这些菜单中工作时，随时注意如果按下Esc键。为了减少代码的杂乱，我编写了一个单独的方法，当我请求输入时，我可以随时调用它(比如选择，或者在表单中输入信息，等等)。我的问题是，它总是取消第一个按键。如果用户在菜单中输入一个要移动的数字，这个数字就不会被输入，如果他们在表单中输入了一个名字，第一个字母丢失了等等。
目前的代码如下；
public static void checkForEsc()
浏览 3提问于2021-11-01得票数 2
回答已采纳
1回答
我试图用yup在react钩子表单上编写错误处理，但是当我想像文档说明()那样传递解析器时，我得到了这个错误：
SyntaxError:无法在模块module.exports =module.exports之外使用导入语句(“@钩子/解析器/yup”)；
我的验证模式：
const schema = Yup.object().shape({
person: Yup.string()
.min(3, "To pole jest za krótkie")
.max(30, "To pole jest za długie")
.requ
浏览 2提问于2021-02-13得票数 1
回答已采纳
当我想在插入后立即获得文本输入的值时，我使用'keyup‘事件。
现在，我在一个CodeReview问题中看到了使用事件“输入”来完成同样的任务。
CodeReview问题(第5行)：
我已经修补了一点。制作了此演示：
var box = document.querySelector('input');
box.addEventListener('keyup', function() {
console.log('keyup: %s', this.value);
});
box.addEventListener('in
浏览 0提问于2016-09-27得票数 12
1回答
我试图从我的输入中抛出所需的错误，这是我包装在来自react-hook-form版本7的Controller组件中的。
我的输入是一个材料-UI TextField本身；
<Controller
name="firstName"
control={control}
defaultValue=""
rules={{ required: true}}
render={({field}) =>
<TextField
id="
浏览 3提问于2021-05-22得票数 5
回答已采纳
1回答
当我提交表单时，表单出现错误，比如空的必填输入，浏览器会向上滚动到该输入。我不想这样。我有自定义的滚动到错误的输入和浏览器滚动干扰我的。如何禁用此功能？
顺便说一句，我使用了react-hook-form
浏览 0提问于2021-04-22得票数 0
1回答
密码验证消息不会触发，即使我只在密码字段中提供字母或数字。我的意图是，如果密码不是alphanumeric格式，那么密码字段应该触发验证消息。我正在使用react-hook-form
<label>
<input className="inputRequest formContentElement" name="password" type="password" placeholder="Password"
onChange={onChange}
m
浏览 4提问于2020-06-06得票数 1
回答已采纳
1回答
输入格式(掩码)，如vue指令
、、、、
当我输入这样的输入时，我需要一种行为：
只用于输入，输入的最后两位数由点分隔。
例如:键盘输入"5“-显示在输入"0.05”。键盘输入"1005“-显示在输入"10.05”。
这就是我现在所拥有的：
Vue.directive('format', {
bind(el: HTMLElement, binding: any, vnode: VNode) {
const { modifiers } = binding;
const targetElement = el;
if (modifiers.cost) {
浏览 2提问于2020-12-11得票数 1
我正在使用带有自定义动态输入字段数组的react-hook-form，当我单击submit按钮时，它看起来验证正在工作，但它没有显示错误消息，我创建的状态如下：
const [formFields, setFormFields] = useState([
{
height: 45,
label: "tv",
placeholder: "555",
name: "tv",
maxWidth: 203,
error: errors.tv,
value: ""
},
{
height: 45,
lab
浏览 14提问于2020-03-03得票数 1
回答已采纳
1回答
我有一个用Unicode实现的不同语言的系统。条件是系统还必须接受Unicode字符(用于数字)并对其进行相应的处理。是否可以将任何Unicode字符(表示数字)转换为合理的英语数字等效项？
我如何在Javascript中实现它？
编辑:我在网上搜索了一下，在unicode.org里找到了一张图表。有与我想要的文字相对应的代码。现在，如何从输入的unicode字符串中读取代码？
浏览 4提问于2013-05-10得票数 1
回答已采纳
我有两个正则表达式来验证输入的值。
允许任意长度的字母-数字值的值：
@"^\s*(?<ALPHA>[A-Z0-9]+)\s*"
另一种只允许数值：
@"^\s*(?<NUM>[0-9]{10})"
如何使长度为11的数字字符串不被NUM正则表达式捕获。
浏览 0提问于2009-04-24得票数 13
回答已采纳
1回答
我正在用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
1回答
按照示例，我有一个自定义输入组件：
Input.tsx
import React from "react";
export default function Input({label, name, onChange, onBlur, ref}:any) {
return (
<>
<label htmlFor={name}>{label}</label>
<input
name={name}
placeholder="Jane&#
浏览 2提问于2022-08-29得票数 1
回答已采纳
我制作了一个程序，它询问一个数组中应该输入多少个元素，所以如果用户输入3，它将要求一个值存储在数组中，然后程序再次要求输入，“输入一个数字”。
如果用户输入一个已经存储在数组中的值，它应该显示“您输入的数字已经存储在数组中”。
我的教授给了我们这个任务，他说我们应该只使用数组和循环。我是这个计算机编程的新手，目前正在学习程序设计一年级的大学。如果有人能帮我，那就太好了。
int main()
{
int Array[50], i, Number;
int cont;
printf("\nPlease Enter Number of elements in an ar
浏览 3提问于2019-09-25得票数 0
回答已采纳
1回答
我正在构建一个用于创建烹饪食谱的component in React。我正在使用react-hook-form来验证表单。我的容器里有两张表格。一个用于添加配料，具有三个输入字段(名称、数量、单位)，另一个用于步骤-具有一个输入字段。当我添加配料或步骤时，我会验证输入的数据是否正确，并阻止向列表中添加项目，如果数据不正确，该列表位于此表单的下方。到目前一切尚好。但我的问题是，我需要使用页面底部的“添加食谱”按钮访问这两个表单的验证过程。例如，如果我将那些必需的输入字段留空，我希望通过按下“添加配方”按钮来检查，而不仅仅是提交这两个“子窗体”。下面是gist的链接：Link。有没有人可以看看我
浏览 15提问于2020-04-06得票数 0
我开始使用react-hook-form来验证我的输入，但是require规则总是被触发，即使我在输入字段中键入/输入一些东西。
import React, { useState } from "react";
import { Controller, useForm } from "react-hook-form";
import { Button, Form, Label, Input } from "reactstrap";
const setErrorStyle = (name) => {
return {
borde
浏览 19提问于2021-06-03得票数 0
回答已采纳
我已经开始使用新的React-Hook-form库，并希望在更改时提交输入字段，而不是在提交时提交。另外，我计划使用来自Lodash的去抖动来避免重新渲染 这就是我到目前为止所尝试的： import React, { useEffect } from "react";
import ReactDOM from "react-dom";
import { useForm } from "react-hook-form";
import "./styles.css";
export default function App()
浏览 53提问于2020-08-18得票数 1
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
即时通信 IM
实时音视频活动推荐
腾讯云开发者
