站在用戶的角度思考問題，與客戶深入溝通，找到重慶網(wǎng)站設(shè)計與重慶網(wǎng)站推廣的解決方案，憑借多年的經(jīng)驗，讓設(shè)計與互聯(lián)網(wǎng)技術(shù)結(jié)合，創(chuàng)造個性化、用戶體驗好的作品，建站類型包括：網(wǎng)站設(shè)計制作、成都網(wǎng)站設(shè)計、企業(yè)官網(wǎng)、英文網(wǎng)站、手機端網(wǎng)站、網(wǎng)站推廣、域名注冊、網(wǎng)頁空間、企業(yè)郵箱。業(yè)務(wù)覆蓋重慶地區(qū)。
發(fā)現(xiàn)Formik是在我學(xué)習(xí)redux-form過程中從國外一篇博客上偶然發(fā)現(xiàn)的，看到作者的高度肯定后我立即轉(zhuǎn)到github上，正如許多朋友所關(guān)注的，F(xiàn)ormik的星數(shù)達(dá)8282，這個數(shù)字在github雖然不算很高，但是從基于React技術(shù)跨平臺表單開發(fā)這個主題角度來看，此數(shù)字已經(jīng)相當(dāng)可觀了。不自覺地，我對比了redux-form與Formik的幾個數(shù)據(jù)，如下：
| 庫 | 開源庫的時間 | 星數(shù) |
|---|---|---|
| redux-form | 3年以前 | 10210 |
| Formik | 1年前 | 8282 |
于是，我得出如下幾個不太肯定的結(jié)論（歡迎有興趣的朋友一起討論）：
1，redux-form是目前基于React+Redux開發(fā)構(gòu)建表單子項目時主要開源選擇方案；
2，redux-form很可能是目前大多數(shù)React程序員心目中高效解決方案的選擇；
3，在github上Formik在未來一年后星數(shù)很有可能會超過redux-form項目。
我作出上述猜測主要理由是，經(jīng)過這段時間我redux-form學(xué)習(xí)，我發(fā)現(xiàn)要深度掌握redux-form實踐應(yīng)用并靈活地處理各種有關(guān)問題，需要花費相當(dāng)?shù)拇鷥r。尤其說明問題的是，在表單體積膨脹和數(shù)量急劇增加的情況下，系統(tǒng)的性能有可能受到嚴(yán)重的影響。現(xiàn)在我有了react-redux基礎(chǔ)，并理解了redux-form應(yīng)用原理后，感覺使用Formik開發(fā)React表單一下變得異常輕松愉快！
為了節(jié)約時間，本系列的幾篇我會首先使用英語方式，再在后面的時間里逐篇翻譯成中文。
至此，你可能會想：“為什么不使用Redux-Form這一方案呢？”對于這個問題，包括我在內(nèi)的Redux用戶都會自然地提出這個問題。對此，F(xiàn)ormik開發(fā)者的列出如下三個理由：
**1. React開發(fā)專家Dan Abramov認(rèn)為，表單狀態(tài)本質(zhì)上是短暫的和局部性的，因此通過Redux解決方案（或任何類型的Flux庫）來跟蹤表單狀態(tài)是不必要的。
Formik的開發(fā)目標(biāo)是：使用最小的易于使用的API調(diào)用創(chuàng)建一個可伸縮的、持久性的表單生成器。當(dāng)然，還提供另外一些功能供開發(fā)者定制使用。
Formik受到Brent Jackson開發(fā)的高階組件的啟發(fā) 。同時還吸收了Redux-Form庫的命名方案；還有受到React-Motion和React-Router 4的啟發(fā)最新引入的render屬性。無論你是否使用過上述這些庫，F(xiàn)ormik 都會使你在短短的數(shù)分鐘內(nèi)快速入門。
把Formik添加到你的已有項目中的方式如下：
npm i formik --save
官方網(wǎng)站上提供了一組類似于redux-form官方的示例供初學(xué)者學(xué)習(xí)之用。它們有：
Formik跟蹤表單狀態(tài)，然后以props方式把此狀態(tài)還有一些可重用的方法和事件處理器（例如 handleChange，handleBlur和handleSubmit暴露給表單組件。其中，handleChange 和handleBlur工作方式完全一樣——都使用name或者id屬性來標(biāo)記要更新的表單字段。
歸納來看，可以使用如下兩種方式之一來使用Formik：
上述兩種方式完全一樣工作，內(nèi)部實現(xiàn)原理完全相同。只是各自在使用風(fēng)格上有所不同而已。請參考如下代碼：
重慶分公司
重慶分公司
//高階組件方式
import React from 'react';
import { withFormik } from 'formik';
// Our inner form component which receives our form's state and updater methods as props
const InnerForm = ({
values,
errors,
touched,
handleChange,
handleBlur,
handleSubmit,
isSubmitting,
}) => (
);
//使用withFormik HoC包裝表單
const MyForm = withFormik({
// Transform outer props into form values
mapPropsToValues: props => ({ email: '', password: '' }),
// Add a custom validation function (this can be async too!)
validate: (values, props) => {
const errors = {};
if (!values.email) {
errors.email = 'Required';
} else if (
!/^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,4}$/i.test(values.email)
) {
errors.email = 'Invalid email address';
}
return errors;
},
//表單提交處理器
handleSubmit: (
values,
{
props,
setSubmitting,
setErrors /* setValues, setStatus, and other goodies */,
}
) => {
LoginToMyApp(values).then(
user => {
setSubmitting(false);
// do whatevs...
// props.updateUser(user)
},
errors => {
setSubmitting(false);
// Maybe even transform your API's errors into the same shape as Formik's!
setErrors(transformMyApiErrors(errors));
}
);
},
})(InnerForm);
//然后你可以在任何地方自由使用My Form
This can be anywhere in your application
My Form
This can be anywhere in your application
{/*
The benefit of the render prop approach is that you have full access to React's
state, props, and composition model. Thus there is no need to map outer props
to values...you can just set the initial values, and if they depend on props / state
then--boom--you can directly access to props / state.
The render prop accepts your inner form component, which you can define separately or inline
totally up to you:
- ` }>`
- ``
- `{props => } ` (identical to as render, just written differently)
*/}
{
// same as above, but feel free to move this into a class method now.
let errors = {};
if (!values.email) {
errors.email = 'Required';
} else if (
!/^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,4}$/i.test(values.email)
) {
errors.email = 'Invalid email address';
}
return errors;
}}
onSubmit={(
values,
{ setSubmitting, setErrors /* setValues and other goodies */ }
) => {
LoginToMyApp(values).then(
user => {
setSubmitting(false);
// do whatevs...
// props.updateUser(user)
},
errors => {
setSubmitting(false);
// Maybe transform your API's errors into the same shape as Formik's
setErrors(transformMyApiErrors(errors));
}
);
}}
render={({
values,
errors,
touched,
handleChange,
handleBlur,
handleSubmit,
isSubmitting,
}) => (
)}
/>
);
export default Basic;正你從上面觀察到的，表單的校驗邏輯完全由開發(fā)者自己實現(xiàn)。你可以心情使用第三方庫來編寫你自己的定制校驗器。從官方網(wǎng)站上了解到，示例中大量使用Yup庫來實現(xiàn)對象的格式校驗。它提供了一種十分類似于Joi / React PropTypes的API，只不過在瀏覽器中尺寸十分小巧，且對運行時應(yīng)用來說已經(jīng)足夠快。在此建議同學(xué)們也積極使用Yup。并且在Formik中也針對Yup提供了一種特別的配置選項/屬性稱作validationSchema，它能夠把Yup的校驗錯誤自動轉(zhuǎn)換成一種很小的對象（對象中也提供了values和touched等鍵支持）。使用npm把Yup安裝到你的項目中的方式如下：
npm install yup --save
1.https://github.com/jaredpalmer/formik
2.http://www.lizhe.name/node/252
3.https://keyholesoftware.com/2017/10/23/the-joy-of-forms-with-react-and-formik/
