react 收集表单数据 react-hook-form
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的更多相关文章
- (尚012)Vue表单数据的自动手集(表单数据提交,需要收集表单数据)
自动收集,就是我一输入数据,就自动收集,等我点击提交按钮的时候,数据就收集好了 1.使用v-model对表单数据自动收集 1)text/textare----单行/多行输入框 2)checkbox-- ...
- 传统 HTML 表单数据的“整存整取”
在日常开发中,涉及表单的处理司空见惯.过往,在取值和赋值的过程中,借助 jQuery 常常只是逐个控件进行操作,可惜这样开发效率并不高.那么能不能批量获取整个表单的值呢,以及批量为表单赋值. 一.取值 ...
- json化表单数据
/** * josn化表单数据 * @name baidu.form.json * @function * @grammar baidu.form.json(form[, replacer]) * @ ...
- jQuery序列化表单数据 serialize()、serializeArray()及使用
1.serialize() 方法: serialize() 方法通过序列化表单值,创建 URL 编码文本字符串. 您可以选择一个或多个表单元素(比如 input 及/或 文本框),或者 form 元素 ...
- 【09】react 之 表单组件
不太清楚有多少初学React的同学和博主当时一样,在看完React的生命周期.数据流之后觉得已经上手了,甩开文档啪啪啪的开始敲了起来.结果...居然被一个input标签给教做人了. 故事是这样的:首先 ...
- easyui不提交window中的form表单数据
<form id="ff" method="post">, <div id="win" class="easyu ...
- 解析form表单数据
//解析form表单数据 function parseFormData(params) { var args = new Object(); for(var key in params){ if(!p ...
- 使用jQuery实现跨域提交表单数据
我们在WEB开发中有时会遇到这种情况,比如要从A网站收集用户信息,提交给B网站处理,这个时候就会涉及到跨域提交数据的问题.本文将给您介绍如何使用jQuery来实现异步跨域提交表单数据. 在jQue ...
- ajax无刷新方式收集表单并提交表单
ajax无刷新方式收集表单有两种方式, 一个是使用html5的FormData.一个是传统的方式. 一,FormData,在主流的浏览器中可以用,IE不好用啊. 另外,FormData使用有两个条件, ...
- Ajax表单提交插件jquery form
jQuery Form插件是一个优秀的Ajax表单插件,我们可以非常容易的使用它处理表单控件的值,清空和复位表单控件,附件上传,以及完成Ajax表单提交. jQuery Form有两个核心方法ajax ...
随机推荐
- go组合
package main import "fmt" func main() { aa := []string{"a", "b", " ...
- win10 python mysqlclient 安装问题 已解决
用习惯了Linux 忽然换到win10 超级不习惯 今天下午就一个mysqlclient 安装弄了好长时间 ,最后发现是得改名 真是想爆粗口. 下面直接进入正题: 下载地址 https:/ ...
- linux 查看端口号是否对外开放,并开放端口号
查看对外开放的端口状态查询指定端口是否已开 firewall-cmd --query-port=8780/tcp 提示 yes,表示开启:no表示未开启. 对外开发端口 查看想开的端口是否已开:fir ...
- ubuntu 16.04 Chrome安装
打开终端 输入 命令1:sudo wget http://www.linuxidc.com/files/repo/google-chrome.list -P /etc/apt/sources.list ...
- C语言学习---星花与取地址&----以及多级指针
#include<stdio.h> int main { //对一个表达式加* , 就会对表达式减一级星花*, //如果对表达式取&, 就会加一级* int* p; int** q ...
- chrome浏览器启用es6语法支持,初次体验浏览器端模块化加载
医院项目,记录下,花了一个晚上的时间. 注意:最新版本的chrome浏览器已支持module语法,需要在web服务器环境下运行! 注:chrome76版本及以上不再需要设置了,浏览器已默认支持,至于从 ...
- Word05 邀请函office真题
1.课程的讲解之前,先来对题目进行分析,首先需要制作一份请柬,请柬中需要包含标题.收件人名称.联谊会时间.联谊会地点和邀请人. 2.打开一个"新的Wrod"文档,在页面中输入请柬的 ...
- Web Uploader上传文件
Web Uploader是百度提供的. 1:下载:http://fex.baidu.com/webuploader/(官方下载/示例) 2:使用Web Uploader文件上传需要引入三种资源:JS, ...
- Java数组之数组的使用
数组的使用 普通的for循环 For-Each循环 数组作方法入参 数组作返回值 public class ArrayDemo03 { public static void main(String[] ...
- Oracle修改查询优化器版本
查询优化器参数optimizer_features_enable 在每个数据库版本中,Oracle都会在查询优化器中引入或启用新的特性. 如果在升级到一个新的版本后希望保留查询优化器的行为,可以通过设 ...