Formik
made with React

Formik

这是一个可以在React中构建表单的组件。

相关问答
查看全部
简介及使用教程

Formik是一个可以在React中构建表单的组件。表单在React中确实非常冗长,更糟糕的是大多数表单助手会过多地使用魔术,并且往往会产生巨大的性能成本。

Formik是一个小型库,可以帮助用户解决这3个问题烦人的部分:

  1. 使值进入和退出表单状态;
  2. 验证和错误消息;
  3. 处理表单提交。

安装

Npm

npm i formik

Yarn

yarn add formik

浏览器

 <script src="https://unpkg.com/formik/dist/formik.umd.production.min.js"></script>

使用

一个简单的表格示例

 import React from 'react';
 import { useFormik } from 'formik';

 const SignupForm = () => {
   // Pass the useFormik() hook initial form values and a submit function that will
   // be called when the form is submitted
   const formik = useFormik({
     initialValues: {
       email: '',
     },
     onSubmit: values => {
       alert(JSON.stringify(values, null, 2));
     },
   });
   return (
     <form onSubmit={formik.handleSubmit}>
       <label htmlFor="email">Email Address</label>
       <input
         id="email"
         name="email"
         type="email"
         onChange={formik.handleChange}
         value={formik.values.email}
       />
       <button type="submit">Submit</button>
     </form>
   );
 };

image.png

作者

Jared Palmer

@jaredpalmer

相关项目