Formik
made with
React
简介及使用教程
Formik是一个可以在React中构建表单的组件。表单在React中确实非常冗长,更糟糕的是大多数表单助手会过多地使用魔术,并且往往会产生巨大的性能成本。
Formik是一个小型库,可以帮助用户解决这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>
);
};
作者
Jared Palmer
@jaredpalmer相关项目