轻量级React表单工具库 - useForm 的使用教程

useForm是一个轻量级的、灵活的、可定制的React的表单工具库。

安装

# Yarn
$ yarn add @rvision/use-form

# NPM
$ npm i @rvision/use-form

基本使用方法

const defaultValues = {
  firstName: '',
  lastName: '',
  email: '',
  agree: false
};
const Form = () => {
  const {
    register,
    handleSubmit,
  } = useForm({
    defaultValues
  });
  const onSubmit = values => console.log(values);
  return (
    <div>
        <label>
          Enter first name:
          <input type="text" {...register('firstName')} />
        </label>
        <label>
          Enter last name:
          <input type="text" {...register('lastName')} />
        </label>
        <label>
          Enter email:
          <input type="email" {...register('email')} />
        </label>
        <label>
          <input type="checkbox" {...register('agree')} />
          I agree to terms and conditions
        </label>
        <button type="submit" onClick={handleSubmit(onSubmit)}>
          Register
        </button>
    </div>
  );
}

预览

The postLightweight React Form Utility Library - useFormappeared first onReactScript.