react-hook-form（React表单） - 1.useForm - 《各种npm包》

1.register

import React,{useState,useEffect} from "react";
import { useForm } from "react-hook-form";
export default function App() {
  //useForm
  const { register, handleSubmit, watch, formState: { errors } } = useForm();
  const onSubmit = data => console.log(data);
  const [test, setTest] = useState("lisi")
  //监听example值的变化
  console.log(watch("example")); // watch input value by passing the name of it
  useEffect(() => {
    setTest("zhangsan")
  }, [])
  return (
    //“handleSubmit”将在调用“onSubmit”之前验证您的输入
    <form onSubmit={handleSubmit(onSubmit)}>
      {/* 通过调用“register”函数将您的输入注册到钩子中 */}
      <input defaultValue={test} {...register("example")} />
      {/* 包括使用必需或其他标准 HTML 验证规则的验证 */}
      <input {...register("exampleRequired", { required: true })} />
        {/* 字段验证失败时将返回错误 */}
      {errors.exampleRequired && <span>This field is required</span>}
      <input type="submit"/>
    </form>
  );
}

1.register

//<DOM {...register("name",obj)}>  name名+object（object里的东西在验证前发生）

<input {...register("exampleRequired", { required: true })} />

name（string）	属性名
required（boolean）	true:必须输入一个值
maxLength（number）	接受的值的最大长度
minLength（number）	接受的值的最小长度
max（number）	接受的数字最大值,其他类型转为字符串，如果是逗号隔开的数值会转换为字符转
min（number）	接受的数字最小值,其他类型转为字符串，如果是逗号隔开的数值会转换为字符转
pattern（RegExp）	带有 /g 标志的 RegExp 对象会跟踪发生匹配的 lastIndex
validate(Function \| Object)	回调函数
valueAsNumber(boolean)	相当于Boolean(value)
valueAsDate(boolean)	返回一个Date对象
setValueAs:((value: any) => T)	运行函数返回输入值
disabled(boolean)	是否被禁用
onChange（(e: SyntheticEvent) => void）	更改事件中调用的函数事件
onBlur（(e: SyntheticEvent) => void）	失去焦点触发
value	默认值
shouldUnregister