rc-use-form

Install

// use yarn
yarn add rc-use-form
// use npm
npm install rc-use-form

Demo

simple

import useForm from 'rc-use-form';
const Demo = () => {
 const [form, field] = useForm({
 name: '',
 password: ''
 })
 
 const handleSubmit = (event) => {
 event.preventDefault()
 console.log(form.value)
 }
 
 return (
 <div>
 <form onSubmit={handleSubmit}>
 <div>
 <label>username</label>
 <input type="text" {...field("name")}/>
 </div>
 <div>
 <label>password</label>
 <input type="password" {...field("password")} />
 </div>
 <button type='submit'>submit</button>
 </form>
 </div>
 )
}

validate

import useForm from 'rc-use-form';
const Demo = () => {
 const [form, field] = useForm({
 name: '',
 password: ''
 })
 
 const handleSubmit = (event) => {
 event.preventDefault()
 form.validate((errors) => {
 if(!errors) {
 console.log(form.value)
 alert('submit')
 }
 })
 }
 
 return (
 <div>
 <form onSubmit={handleSubmit}>
 <div>
 <label>username</label>
 <input type="text" {...field("name", {
 rules: [{type: "string", required: true}]
 })}
 />
 {
 form.errors.name && <div>
 {form.errors.name[0].message}
 </div>
 }
 </div>
 <div>
 <label>password</label>
 <input type="password" {...field("password", {
 rules: [{type: "string", required: true}]
 })}
 />
 {
 form.errors.password && <div>
 {form.errors.password[0].message}
 </div>
 }
 </div>
 <button type='submit'>submit</button>
 </form>
 </div>
 )
}

form

field

field(name, [options])

Options