import React from 'react'
import ReactDOM from 'react-dom'
import { useForm } from 'react-hook-form' function App() {
const { register, handleSubmit, errors } = useForm() // initialize the hook
const onSubmit = (data) => {
console.log(data)
} return (
<form onSubmit={handleSubmit(onSubmit)}>
<input name="firstname" ref={register} /> {/* register an input */}
<input name="lastname" ref={register({ required: true })} />
{errors.lastname && 'Last name is required.'}
<input name="age" ref={register({ pattern: /\d+/ })} />
{errors.age && 'Please enter number for age.'}
<input type="submit" />
</form>
)
} ReactDOM.render(<App />, document.getElementById('root'))

  

react 收集表单数据 react-hook-form的更多相关文章

  1. (尚012)Vue表单数据的自动手集(表单数据提交,需要收集表单数据)

    自动收集,就是我一输入数据,就自动收集,等我点击提交按钮的时候,数据就收集好了 1.使用v-model对表单数据自动收集 1)text/textare----单行/多行输入框 2)checkbox-- ...

  2. 传统 HTML 表单数据的“整存整取”

    在日常开发中,涉及表单的处理司空见惯.过往,在取值和赋值的过程中,借助 jQuery 常常只是逐个控件进行操作,可惜这样开发效率并不高.那么能不能批量获取整个表单的值呢,以及批量为表单赋值. 一.取值 ...

  3. json化表单数据

    /** * josn化表单数据 * @name baidu.form.json * @function * @grammar baidu.form.json(form[, replacer]) * @ ...

  4. jQuery序列化表单数据 serialize()、serializeArray()及使用

    1.serialize() 方法: serialize() 方法通过序列化表单值,创建 URL 编码文本字符串. 您可以选择一个或多个表单元素(比如 input 及/或 文本框),或者 form 元素 ...

  5. 【09】react 之 表单组件

    不太清楚有多少初学React的同学和博主当时一样,在看完React的生命周期.数据流之后觉得已经上手了,甩开文档啪啪啪的开始敲了起来.结果...居然被一个input标签给教做人了. 故事是这样的:首先 ...

  6. easyui不提交window中的form表单数据

    <form id="ff" method="post">, <div id="win" class="easyu ...

  7. 解析form表单数据

    //解析form表单数据 function parseFormData(params) { var args = new Object(); for(var key in params){ if(!p ...

  8. 使用jQuery实现跨域提交表单数据

    我们在WEB开发中有时会遇到这种情况,比如要从A网站收集用户信息,提交给B网站处理,这个时候就会涉及到跨域提交数据的问题.本文将给您介绍如何使用jQuery来实现异步跨域提交表单数据.   在jQue ...

  9. ajax无刷新方式收集表单并提交表单

    ajax无刷新方式收集表单有两种方式, 一个是使用html5的FormData.一个是传统的方式. 一,FormData,在主流的浏览器中可以用,IE不好用啊. 另外,FormData使用有两个条件, ...

  10. Ajax表单提交插件jquery form

    jQuery Form插件是一个优秀的Ajax表单插件,我们可以非常容易的使用它处理表单控件的值,清空和复位表单控件,附件上传,以及完成Ajax表单提交. jQuery Form有两个核心方法ajax ...

随机推荐

  1. Dynamics CRM 安全模型的性能问题

    性能问题对系统的影响可以是致命性的,一旦不重视,在不久的将来随时可能爆发,导致系统卡顿甚至无法操作,即时重启也无济于事:甚至极其难以发现.这里为自己记录一下过往的经验.系统一开始的设计,很大程度上决定 ...

  2. java基于ssm开发的宠物商城宠物店源码

    简介 关于宠物的商店,首页,搜索商品,详情页,可选择尺寸,衣服颜色,根据不同规格显示不同的商品价格,加入购物车,立即购买,评价列表展示,商品详情展示,商品评分,分类商品,标签查询,更多分类查询 演示视 ...

  3. ping Hyper-V内虚拟机网络延迟

  4. nginx4层代理ssh服务

    四层代理依赖模块ngx_stream_core_module,默认情况下,此模块不构建,应使用配置参数启用 --with-stream 配置文件内容: ... stream { upstream ss ...

  5. vulnhub:Victim01靶机

    kali:192.168.111.111 靶机:192.168.111.170 信息收集 端口扫描 nmap -A -v -sV -T5 -p- --script=http-enum 192.168. ...

  6. 如何把接口返回文件流读取后写入Excel

    代码: res = res.content #接口返回的内容 with open(path,mode='wb') as file: #excel的路径 file.write(res)

  7. Java流程控制之for循环

    for循环[重点] 虽然所有的循环结构都可以用while或者do...while表示,但Java提供了另一种语句--for循环,使一些循环结构变得更加简单. for循环语句是支持迭代的一种通用结构,是 ...

  8. pymongo解决查询的时区相差8小时

    背景 最近需要到mongoDB中查询数据,但是发现返回的日期总是和实际时间差8小时.到数据库查询了一下看到时间的确是准确的,只是查询出来的比实际的少了8小时. 通过网上查找资料了解到默认时区是UTC, ...

  9. Angular前端调用asp.net core web api后端,报跨域问题

    在 ASP.NET Core 中启用跨域请求 (CORS) https://docs.microsoft.com/en-us/aspnet/core/security/cors?view=aspnet ...

  10. java8中CompletableFuture异步处理超时

    java8中CompletableFuture异步处理超时的方法 Java 8 的 CompletableFuture 并没有 timeout 机制,虽然可以在 get 的时候指定 timeout,但 ...