Dark Mode

Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Sign up
Appearance settings

qiqiboy/react-formutil

Repository files navigation

react-formutil

Happy to build the forms in React ^_^

react-formutil Ding Yi Liao Yi Chong Biao Dan Zhuang Tai De Shou Ji , Fen Fa , Tong Bu Mo Xing . Ji Yu Ci ,Ni Ke Yi Hen Fang Bian De Shi Yong react-formutil Lai Chuang Jian , Guan Li Ni De Ye Mian Biao Dan .

react-formutil De You Shi

  1. Quan Ju Biao Dan Zhuang Tai Tong Bu ,Shi Yong Geng Jia Jian Dan , Zi Ran , Fu He Zhi Jue , Xin Zhi Fu Dan Xiao ,Tong Shi Dui Yu Fu Za Chang Jing ,Ye Ti Gong Liao Gao Xing Neng Biao Dan You Hua Zhi Nan Gong Can Kao
  2. Yi Qie Du Shi Zhuang Tai ,Biao Dan He Xin Xiang Guan De $value $viewValue $diry $pristine $touched $untouched $valid $invalid $error Deng Du Shi Shi Shi Zhuang Tai ,Zheng Ge Biao Dan Yi Lei Si reduxDe Dan Yi Zhuang Tai Shu Jin Xing Biao Da ;Wu Xu E Wai De getFieldValue(name) getFormValues() validateField()Deng E Wai Dong Zuo
  3. Fei Qin Ru Xing ,Zhi Ti Gong Liao Dui Biao Dan Zhuang Tai Shou Ji De Chou Xiang Jie Kou ,Bu Xuan Ran Ren He dom Jie Gou ;Dan Tong Shi Ni Fei Chang Rong Yi Bian Xie Chu Gua He Xiang Mu De Field Zu Jian ,Wo Men Ye Ti Gong Liao Dui Liu Xing UI Ku De Gua Pei
  4. Cai Yong Shou Kong Zu Jian He context,Dui Zu Jian Qian Tao Ceng Ji Mei You Xian Zhi ,Zhi Chi Shu Ju Shuang Xiang Tong Bu (model<->view)
  5. Tong Shi Zhi Chi Gao Jie Zu Jian He Han Shu Shi Zi Zu Jian (render props)Shi Diao Yong ,Geng Ling Huo (>=0.5.0 Qi Zhi Chi Hooks)
  6. Ju Bei Ling Huo De Biao Dan Xiao Yan Fang Shi ,Zhi Chi Tong Bu He Yi Bu Xiao Yan , Lan Xiao Yan Deng

Wu Lun Ni Shi Fou Yi Jing Liao Jie Liao react-formutilDe Te Xing , Yong Fa Yi Ji API,Kai Shi Xiang Mu Qian ,Qing Wu Bi Yue Du Xia Wo Men Jian Yi De Zui Jia Shi Jian !

  • An Zhuang Installation
    • Zui Xin Ban
    • 0.5.x
    • UMDBao
  • Shi Li Examples
  • Shi Yong Usage
      • render component
      • name
      • $defaultValue
      • $defaultState
      • $validators
      • $asyncValidators
      • $validateLazy
      • $memo
      • $onFieldChange
      • $reserveOnUnmount
      • $parser
      • $formatter
      • $ref
      • $fieldutil
        • $value
        • $viewValue
        • $dirty | $pristine | $touched | $untouched | $invalid | $valid | $focused | $pending
        • $error
        • $new()
        • $getState()
        • $reset()
        • $getComponent()
        • $setState($newState)
        • $render()
        • $setValue()
        • $setDirty($dirty) | $setTouched($touched) | $setFocused($focused) | $setValidity(errKey, result)
        • $setError($error)
        • $validate()
        • $onValidate()
        • $getFirstError()
        • $$formutil
    • withField(Component)
      • $fieldHandler
      • Xuan Ran Yuan Sheng Biao Dan Kong Jian
        • input
        • select
        • checkbox/radio
        • checkbox/radio group
      • Xuan Ran Zi Ding Yi Zu Jian
        • Yuan Sheng Biao Dan Kong Jian
        • Lie Biao Shu Zu
          • $listutil
        • Di San Fang Zu Jian
      • name
      • $defaultValue
      • $defaultState
      • $validators
      • $validateLazy
      • $memo
      • $asyncValidators
      • $parser
      • $formatter
      • defaultValue
      • validMessage
      • checked / unchecked
      • valuePropName changePropName focusPropName blurPropName
      • getValueFromEvent()
      • passUtil
      • render | component
      • $defaultValues
      • $defaultStates
      • $onFormChange
      • $validator
      • $processer
      • $ref
      • $formutil
        • $new()
        • $getField(name)
        • $validate(name)
        • $validates()
        • $onValidates()
        • $render(callback)
        • $setStates($stateTree)
        • $setValues($valueTree)
        • $setErrors($errorTree)
        • $reset($stateTree)
        • $setDirts($dirtyTree) | $setTouches($touchedTree) | $setFocuses($focusedTree)
        • $batchState($newState) | $batchDirty($dirty) | $batchTouched($touched) | $batchFocused($focused)
        • $getFirstError()
        • $states | $weakStates
        • $params | $weakParams | $pureParams
        • $errors | $weakErrors
        • $dirts | $weakDirts
        • $touches | $weakTouches
        • $focuses | $weakFocuses
        • $valid | $invalid
        • $dirty | $pristine
        • $touched | $untouched
        • $focused
    • withForm(Component)
    • connect(Component)
    • Hooks
      • useField
      • useHandler
      • useForm
  • Zui Jia Shi Jian Best Practices
  • FAQ & Chang Jian Wen Ti Jie Da
    • Field Yu EasyField You Shi Yao Qu Bie
    • FieldZhong De $value Yu $viewValue You Shi Yao Qu Bie
    • Ru He Zai Wo Zi Ji De Xiang Mu Zhong Bian Jie De Shi Yong FieldZu Jian ?
    • checkbox Duo Xuan Huo radio Dan Xuan Zu Zen Yao Shi Xian
    • Shi Yong Field Shi Xian Yi Ge Shang Chuan Tu Pian De Biao Dan Kong Jian
    • Ru He Huo Qu Dui Field Sheng Cheng De Jie Dian De Yin Yong ?
    • Dui Yu You Da Liang Biao Dan Xiang De Chang Ye Mian You Mei You You Hua Ban Fa
    • Ru He Zai ant-design Huo Zhe Material-UI Deng Xiang Mu Zhong Shi Yong react-formutil?
    • Ru He Shi Yong typescriptKai Fa ?

An Zhuang Installation

react-formutilXian Zai Yi Jing Zheng Shi 1.0 Ban Ben Liao ,Zhe Dai Biao Wo Men Qi API She Ji Yi Jing Qu Yu Wan Zheng Wen Ding . Shi Shi Shang ,react-formutilCong Chuang Jian Zhi Chu De 0.0.1Ban Ben Dao Mu Qian De 1.0,Qi API She Ji Cong Lai Mei You Fa Sheng Zhong Da Bian Dong ,Mei Ge Ban Ben Du Shi Xiang Qian Jian Rong De . Zhe Dai Biao Wu Lun Ni Dang Qian Zai Na Ge Ban Ben ,Ni Du Ke Yi Wu Tong Sheng Ji Dao Zui Xin Ban ,Bing Qie Li Ji Huo De Xin Ban Ben De Te Xing Zhi Chi !

Zui Xin Ban

# npm
npm install react-formutil --save

# yarn
yarn add react-formutil

0.5.x

0.5.x Bao Han Liao Yi Xie Dui v16.3Yi Qian Ban Ben De react De Yi Xie polyfillsChu Li ,Suo Yi Ke Yi Yong Yu Xiao Yu 16.3De react Ban Ben . Ru Guo Ni Huan Zai Shi Yong Zao Qi Ban Ben De react,Ke Yi Shi Yong Gai Ban Ben .

Suo You De react@16Zao Qi Ban Ben De react,Du Ke Yi Sheng Ji Dao Zui Xin De react,Suo Yi Jian Yi Jiang Xiang Mu Zhong De react Du Jin Xing Sheng Ji ,Bing Shi Yong Zui Xin De 0.6.xBan Ben De react-formutil.

UMDBao

UMDGe Shi Bao Ji Gua Yong Yu webpack rollupDeng Mo Kuai Da Bao Gong Ju ,Ye Ke Yi Zhi Jie Yong Yu Liu Lan Qi scriptBiao Qian Yin Ru (Dang Ran ,Qian Mian Xu Yao Xian Yin Ru reactDe Dai Ma Bao ). Wo Men Ye Ti Gong Liao Liang Ge Ban Ben De Bao Gong Xuan Ze :

Sheng Chan Huan Jing Production Ya Suo Hou De Dai Ma Bao ,Ti Ji Bi Jiao Xiao :

https://unpkg.com/react-formutil/dist/react-formutil.umd.production.js

Kai Fa Huan Jing Development Wei Ya Suo Dai Ma ,Fang Bian Diao Shi Cha Cuo :

https://unpkg.com/react-formutil/dist/react-formutil.umd.development.js

Shi Li Examples

Xian Kan Yi Ge Jian Dan De Shi Li :

Demo on codeSandbox.io

Ru Guo Shang Fang Di Zhi Wu Fa Fang Wen Huo Zhe Jiao Man ,Ye Ke Yi Cha Kan :Demo on github pages

Shang Mian De Shi Li Jian Dan Zhan Shi Liao react-formutil De Ji Ben Yong Fa ,Ni Ke Yi Tong Guo Cha Kan Yuan Dai Ma (Zai codeSandboxHuo Zhe Cha Kan docs).

Ling Wai Ye Zhun Bei Liao Yi Xie Shi Li Yin Dao Jiao Cheng ,Jiao Ni Yi Bu Bu Xue Xi Ru He Shang Shou react-formutil! Ni Ke Yi Dian Ji Xia Fang Lian Jie Jin Ru Zai Xian Shi Li Jiao Cheng ,Gen Zhao Ye Mian Yin Dao Yi Bu Bu Xue Xi Ru He You Jian Dao Shen De Kai Fa Zi Ji De Biao Dan Zu Jian !

Shi Yong Usage

Liao Jie Ru He Zai ant-design, Material-UIDeng Liu Xing react Zu Jian Ku Xiang Mu Zhong Shi Yong react-formutil?

react-formutil Zhu Yao Ti Gong Liao Yi Ge Field Zu Jian He Yi Ge Form Zu Jian ,Ling Wai Huan You Ji Ge Ji Yu Ci De Gao Jie Zu Jian :

  • Shi Yi Ge Chou Xiang De Zu Jian ,Ta Wei Hu Liao Yi Ge Biao Shi Dang Qian Yu De Zhuang Tai Mo Xing .
  • Ye Shi Yi Ge Chou Xiang De Zu Jian ,Ta Zhu Yao Zuo Wei Zheng Ge Biao Dan De Kong Zhi Qi ,Yong Lai He Qi Zu Jian Shu Zhong De FieldZuo Zhuang Tai Mo Xing De Shou Ji Yu Tong Bu .
  • withField Shi Ji Yu Field Bao Zhuang Cheng Gao Jie Zu Jian ,Fang Bian Xi Guan Gao Jie Fang Shi De Diao Yong
  • withForm Shi Ji Yu Form Bao Zhuang Cheng Gao Jie Zu Jian ,Fang Bian Xi Guan Gao Jie Fang Shi De Diao Yong
  • Shi Ji Yu Field Jin Xing De Zu Jian Feng Zhuang ,Ke Yi Zhi Jie Xuan Ran Chu Ji Yu Yuan Sheng Tai Liu Lan Qi De Biao Dan Kong Jian De Biao Dan Xiang ,Fang Bian Zhi Jie Shi Yong . Ling Wai Ta Ye Ti Gong Liao Yi Zu Chou Xiang Jie Kou Yong Yu Dui Jie Qi Ta react Zu Jian Ku .
  • connect Shi Ge Gao Jie Zu Jian ,Yong Lai Gei Bei Bao Zhuang De Zu Jian Chuan Di $formutil Dui Xiang .

react-formutil Bu Xiang Hen Duo Ni Neng Kan Dao De Qi Ta De react Biao Dan Ku ,Ta Shi Fei Qin Ru Xing De . Ji Ta Bing Bu Yao Qiu , Ye Bing Bu Hui Qiang Zhi Xuan Ran Mou Chong Gu Ding De dom Jie Gou . Ta Zhi Xu Yao Ti Gong name Zhi Yi Ji Bang Ding Hao $render Yong Lai Geng Xin Shu Ru Zhi ,Ran Hou Yi Qie Jiu Hui Zi Dong Tong Bu , Geng Xin .

Xu Yao Qiang Diao ,Dang Shi Yong Field He Form Shi ,Wo Men Jian Yi Yi Han Shu Zuo Wei Zi Jie Dian Fang Shi Diao Yong : function as child

Dang Ran ,Ni Ye Ke Yi Tong Guo renderShu Xing Lai Diao Yong :render props

Ye Ke Yi Chuan Di componentLai Zhi Ding Zhi Jie Xuan Ran Yi Ge Zu Jian .

//Yi Ge Han Shu Shi Zi Zu Jian Shu Xie Shi Li
<Form>
{$formutil => {
return <Field name="username">{props => <input />}Field>;
}}
Form>

//Huo Zhe Shi Yong childrenShu Xing
<Form
children={$formutil => <Field name="username" children={props => <input />} />}
/>

//Huo Zhe Shi Yong renderShu Xing
<Form
render={$formutil => <Field name="username" render={props => <input />} />}
/>

//Huo Zhe Shi Yong componentShu Xing
<Form
component={MyForm} />

//Dang Ran Ye Ke Yi Chuan Di Pu Tong Zu Jian Zuo Wei Zi Jie Dian
//FieldZu Jian Xie Zai loginFormZhe Ge Zu Jian Zhong
<Form>
<LoginForm />
Form>

Dui Yu San Ge Zu Jian ,Qi Xiang Guan Shu Xing De You Xian Ji Wei :

component > render > children

Field Shi Yi Ge Biao Zhun De react Zu Jian ,Yi Ge FieldJi Dai Biao Yi Ge Biao Dan Yu . Ta Wei Hu Liao Yi Ge Yu Dang Qian Yu You Guan De Zhuang Tai Mo Xing (Ju Ti Ke Yi Can Kao :$fieldutil).

Ta Ke Yi Li Jie Wei Biao Dan Kong Jian De Ding Ceng Zu Jian ,Ta Ben Shen Bu Xuan Ran Ren He Shi Ji DOM Jie Dian . Ta Tong Guo Xiang Zi Zu Jian Chuan Di $fieldutil Dui Xiang Lai Tong Bu Biao Dan Kong Jian De Zhuang Tai .

Mei Ge Biao Dan Yu De Xuan Ran Du Ying Dang Tong Guo FieldLai Shi Xian . Ta Ti Gong Liao Duo Chong Diao Yong Fang Fa ,Ke Yi Yi Han Shu , Huo Zhe React Zu Jian Dang Zuo Zi Zu Jian Diao Yong ,Tui Jian Shi Yong render props.

Wo Men Ti Gong Liao Yi Ge Jiao Cheng ,Guan Yu Ru Guo Kuai Su Tong Guo FieldZu Jian Ji Cheng Jin Xiang Mu :

Ru He Zai Wo Zi Ji De Xiang Mu Zhong Bian Jie De Shi Yong FieldZu Jian ?

Field Ke Yi Jie Shou Yi Xia Ji Ge Shu Xing Can Shu :

render component

Zhe Liang Ge Shu Xing Wei Ke Xuan ,Bing Qie Bu Neng Tong Shi Cun Zai (component Hui You Xian Yu render,Er Jiang Qi Fu Gai ).

Dang Shi Yong function as childFang Shi Shi ,Ke Yi Bu Chuan Gai Shu Xing .

Ru Guo She Zhi Liao Gai Shu Xing ,Ze Qi Hui Fu Gai Diao function as childFang Shi .

<Field name="username" render={$fieldutil => <input />} />
// Huo
<Field name="username" component={MyField} />

name

Gai Xiang Bi Tian ,name Ke Yi Shi Yi Ge Jian Dan De Zi Fu Chuan ,Ye Ke Yi Shi Yi Ge Zi Fu Chuan Biao Da Shi (Gai Biao Da Shi Zhi Xing Mei You scope, Suo Yi Biao Da Shi Zhong Bu Neng Cun Zai Bian Liang )

Yi Shang Du Shi He Fa De name Zhi . Dui Yu Duo Ceng Ji De name Zhi ,Sheng Cheng De Biao Dan Can Shu Dui Xiang ,Ye Hui Ji Yu Gai Dui Xiang Ceng Ji Chuang Jian . Li Ru ,Shang Mian De Shi Li ,Jiang Hui Sheng Cheng Yi Xia Ge Shi De Biao Dan Can Shu Dui Xiang :

{
"username": "",
"list": ["", { "name": "" }, { "test124": "" }]
}

$defaultValue

0.5.4Qi ,$defaultValueYe Ke Yi Chuan Di Yi Ge Han Shu ,Gai Han Shu Jie Shou Suo You Chuan Di Gei Field De props,Ran Hou Fan Hui De Yao She Zhi De Mo Ren Zhi . Lei Si react-reduxZhong De mapPropsToStateYong Fa .

$defaultValue Ke Yi Tong Guo Chuan Di Yi Ge Zhi ,Huo Zhe Yi Ge Fan Hui Chu Shi Zhi De Han Shu ,Lai Jiang Qi Zuo Wei Field De Mo Ren Zhi /Chu Shi Zhi . Ru Guo Bu Chuan Di Gai Can Shu ,Ze Mo Ren Zhi Du Wei Kong Zi Fu Chuan . Tong Guo Gai Shu Xing ,Ni Ke Yi Zhi Ding Mou Ge Biao Dan Kong Jian De Mo Ren Zhi Huo Chu Shi Zhi .

$defaultValue Ke Yi Shi Ren Yi Lei Xing Zhi .

$defaultState

0.5.4Qi ,$defaultStateYe Ke Yi Chuan Di Yi Ge Han Shu ,Gai Han Shu Jie Shou Suo You Chuan Di Gei Field De props,Ran Hou Fan Hui De Yao She Zhi De Chu Shi Zhuang Tai . Lei Si react-reduxZhong De mapPropsToStateYong Fa .

$defaultState Ke Yi Fu Gai Biao Dan Kong Jian De De Mo Ren Zhuang Tai ,Tong Guo Chuan Di Yi Ge { [key]: value }Dui Xiang ,Huo Zhe Yi Ge Fan Hui { [key]: value }Dui Xiang De Han Shu ,Lai Jiang Qi Zuo Wei Field De Chu Shi Zhuang Tai .

"><Field $defaultState={{ $value: 'username' }} />
<Field $defaultValue="username" />

Shang Mian Liang Zhe Deng Xiao ,Qi Shi Biao Dan Kong Jian De Zhi Zhi Shi Zhuang Tai Li De Yi Ge Zi Duan $value

$validators

Gai Shu Xing Ke Yi She Zhi Biao Dan Kong Jian De Xiao Yan Fang Shi ,Tong Shi Zhi Chi Tong Bu He Yi Bu Xiao Yan . Ta Shi key: value De Dui Xiang Xing Shi ,key Wei Xiao Yan Lei Xing Biao Shi ,value Wei Xiao Yan Han Shu . Jin Dang Xiao Yan Han Shu Fan Hui true Shi ,Biao Shi Gai Xiang Xiao Yan Tong Guo ,Fou Ze Qi Ta Zhi Jiang Hui Bei Dang Zuo Cuo Wu Xin Xi Bao Cun Dao Zhuang Tai Zhong .

Yi Bu Xiao Yan :Ru Guo Xiao Yan Han Shu Fan Hui Yi Ge promiseDui Xiang ,Ze resolvedBiao Shi Xiao Yan Tong Guo ,rejectedZe Xiao Yan Bu Tong Guo ,Tong Shi rejectedFan Hui De reasonJiang Hui Bei Dang Zuo Cuo Wu Xin Xi Bao Cun Dao $errorDui Xiang Zhong .

Yi Bu Xiao Yan Shi ,Zhuang Tai Li Hui You $pending Yong Lai Biao Shi Zheng Zai Yi Bu Xiao Yan . Ru Guo Zhi Kuai Su Bian Hua ,Hui Hong Fa Duo Ci Yi Bu Xiao Yan ,Dan Shi Field Zhi Hui Xiang Ying Zui Hou Yi Ci Yi Bu Xiao Yan Jie Guo ,Qian Mian Mei You Jie Shu De Yi Bu Xiao Yan ,Wu Lun Jie Guo Shi Fou Tong Guo ,Du Hui Bei Hu Lue !!

Yi Bu Xiao Yan Bu Hui Bei Zi Dong Qu Xiao ,Ni Xu Yao Zi Ji Zai Xiao Yan Han Shu Shi Xian Shi ,Que Bao Bei Duo Ci Diao Yong Shi ,Ke Yi Qu Xiao Diao Zhi Qian Wei Jie Shu De Yi Bu Xiao Yan (Li Ru Wei Xiang Ying De ajax Qing Qiu ,Xu Yao abortDiao Ta ).

Te Bie Zhu Yi : Jin Jin She Zhi Liao $validators,Bing Bu Hui Hong Fa Xiao Yan ,Huan Xu Yao She Zhi Pi Pei $validatorsZhong Mei Yi Xiang De Shu Xing Biao Shi Fu ,Gai Shu Xing De Zhi Hui Zuo Wei Di Er Ge Can Shu Chuan Di Gei Xiao Yan Han Shu .

Xiao Yan Bei Diao Yong ,Hui Chuan Ru San Ge Zhi :value, attr, props

  • value Wei Dang Qian Field De Zhi
  • attr Wei Xiao Yan Biao Shi Zhi
  • props Wei Dang Qian Chuan Gei Field De Suo You props,Huan Bao Gua Yi Xia San Ge Te Shu De Zhi :
    • props.$validError Biao Shi Dang Qian Xiao Yan Zhong ,Qian Mian Yi Jing Xiao Yan Chu De Cuo Wu Xin Xi (Gai Shu Xing Wei 0.5.0Xin Zeng )
    • props.$fieldutil Dang Qian Field De $fieldutilDui Xiang (Gai Shu Xing Wei 0.5.0Xin Zeng ).
      • Gai Zhi Wei Shang Yi Ci Xuan Ran De Zhuang Tai ,Ke Yi Tong Guo $fieldutil.$new()Chang Shi Huo Qu Zui Xin Xuan Ran Zhuang Tai
    • props.$formutil Dang Qian Field Suo Shu Form De $formutilDui Xiang .
      • Gai Zhi Wei Shang Yi Ci Xuan Ran De Zhuang Tai ,Ke Yi Tong Guo $formutil.$new()Chang Shi Huo Qu Zui Xin Xuan Ran Zhuang Tai
value.length <= parseInt(len) || 'Zui Shao Chang Du :' + len, disableChar: (value, char) => value.indexOf(char) === -1 || 'Jin Zhi Shu Ru Zi Fu :' + char, /* Zhu Yi :Xia Mian Zhe Tiao Gui Ze Jiang Bu Hui Hong Fa Xiao Yan ,Yin Wei Wo Men Mei You Gei FieldChuan Di minNumber Shu Xing Lai Biao Shi Xu Yao Qu Xiao Yan Gai Tiao Gui Ze */ minNumber: (value, limit) => value > parseFloat(limit) || 'Shu Ru Zhi Bi Xu Da Yu :' + limit, /* Yi Bu Xiao Yan */ asyncCheck: value => axios.post('/api/v1/check_account', { account: value }).catch(error => Promise.reject(error.message)) }}> {$fieldutil => (
$fieldutil.$render(ev.target.value.trim())} value={$fieldutil.$viewValue} /> {$fieldutil.$invalid &&
{$fieldutil.$getFirstError()}
}
)} "><Field
required
maxLength="5"
disableChar="z"
asyncCheck
$validators={{
required: value => !!value || 'Gai Xiang Bi Tian ',
maxLength: (value, len) => value.length <= parseInt(len) || 'Zui Shao Chang Du :' + len,
disableChar: (value, char) => value.indexOf(char) === -1 || 'Jin Zhi Shu Ru Zi Fu :' + char,
/* Zhu Yi :Xia Mian Zhe Tiao Gui Ze Jiang Bu Hui Hong Fa Xiao Yan ,Yin Wei Wo Men Mei You Gei FieldChuan Di minNumber Shu Xing Lai Biao Shi Xu Yao Qu Xiao Yan Gai Tiao Gui Ze */
minNumber: (value, limit) => value > parseFloat(limit) || 'Shu Ru Zhi Bi Xu Da Yu :' + limit,

/* Yi Bu Xiao Yan */
asyncCheck: value =>
axios.post('/api/v1/check_account', { account: value }).catch(error => Promise.reject(error.message))
}}>
{$fieldutil => (
<div className="form-group">
<label>Mi Ma label>
<input
type="number"
onChange={ev => $fieldutil.$render(ev.target.value.trim())}
value={$fieldutil.$viewValue}
/>
{$fieldutil.$invalid && <div className="error">{$fieldutil.$getFirstError()}div>}
div>
)}
Field>

Zai Zhe Ge Li Zi Zhong ,Wo Men Tong Guo $validators She Zhi Liao required , maxLength Yi Ji disabledChar De Xiao Yan Gui Ze . Tong Shi Tong Guo Shu Xing props Biao Shi Liao Xu Yao Xiao Yan Zhe San Ge Zi Duan . Ran Hou Wo Men Ke Yi Tong Guo Zhuang Tai Pan Duan Jiang Cuo Wu Xin Xi Zhan Shi Chu Lai .

Dang Ran ,Ye Ke Yi Zhi Zai Yi Ge Xiao Yan Han Shu Li Xiao Yan Duo Ge Gui Ze ,Shen Zhi Hun He Yi Bu Xiao Yan :

Promise.reject(error.message)); } }} />"><Field
baseCheck
$validators={{
baseCheck(value) {
//Xiao Yan Fei Kong
if (!value) {
return 'Gai Xiang Bi Tian ';
}

//Xiao Yan Shu Ru Chang Du
if (value.length < 5) {
return 'Zui Xiao Shu Ru Wu Ge Zi Fu ';
}

//Yi Bu Xiao Yan
return axios
.post('/api/v1/check_account', { account: value })
.catch(error => Promise.reject(error.message));
}
}}
/>

$asyncValidators

v0.2.22 Qi ,Jian Yi Zhi Jie Shi Yong $validators Ji Ke ,$validators Ye Zhi Chi Liao Yi Bu Xiao Yan . Bu Jian Yi Dan Du Shi Yong $asyncValidators.

Gai Shu Xing Ke Yi She Zhi Biao Dan Xiang De Yi Bu Xiao Yan Gui Ze ,She Zhi Fang Shi Yu $validatorsLei Si . Dan Shi Bu Tong De Shi ,Yi Bu Xiao Yan Han Shu Xu Yao Fan Hui promiseDui Xiang ,Gai promiseBei resolveBiao Shi Xiao Yan Cheng Gong ,rejectBiao Shi Xiao Yan Shi Bai ,Bing Qie rejectDe reasonHui Bei Dang Zuo Shi Bai Yuan Yin Bao Cun Dao Zhuang Tai De $errorDui Xiang .

Yi Bu Xiao Yan Shi ,Zhuang Tai Li Hui You $pendingYong Lai Biao Shi Zheng Zai Yi Bu Xiao Yan .

$validateLazy

Gai Shu Xing Wei v0.5.0 Xin Zeng .

Mo Ren Qing Kuang Xia ,Mei Ci Field De Zhi Gai Bian ,Zai Diao Yong She Zhi De Xiao Yan Fang Fa Shi ,Hui Jiang Suo You De Xiao Yan Han Shu Du Zhi Xing Yi Bian .

Tong Guo Gai Shu Xing ,Ke Yi She Zhi Diao Yong Xiao Yan Han Shu Shi ,Qi Yong Lan Xiao Yan Mo Shi :Ji Shi Fou Yu Dao Di Yi Ge Cuo Wu Hou Ting Zhi Diao Yong Hou Xu Qi Ta Xiao Yan Han Shu . Xiao Yan Shun Xu Wei $validatorsDui Xiang Zhong De Xiao Yan Han Shu De Sheng Ming Shun Xu . Suo Yi Ru Guo Ni You Yi Bu Xiao Yan ,Zui Hao Jiang Qi Fang Dao $validatorsSheng Ming De Zui Hou ,Yi Que Bao $validateLazyNeng You Xiao Jie Sheng Bu Bi Yao De Xiao Yan .

Ru Guo Ni Zai Kao Lu Shi Xian Yi Zu Yong Yu Duo Shu Biao Dan Xiang De Xiao Yan Han Shu ,Na Yao Jian Yi Jiang Zhe Xie Xiao Yan Gui Ze Fen Kai ,Ran Hou Tong Guo Chuan Di Dui Ying Dao Mei Ge Xiao Yan Han Shu De Biao Shi Fu Lai Zai Bu Tong De Field Shang Qi Yong Bu Tong De Xiao Yan ,Bing Qie Ke Yi Li Yong $validateLazyLai Shi Yong Lan Xiao Yan ,Ti Sheng Xiao Yan Xing Neng .

Ru Guo Jin Jin Shi Dui Ge Bie Field Zuo Xiao Yan ,Wo Men Geng Jia Jian Yi Jiang Duo Ge Xiao Yan Gui Ze ,Zai Yi Ge Xiao Yan Han Shu Li Shi Xian !Zhe Yang Ke Yi Geng Jia Zi You De She Ding Xiao Yan Shun Xu Yi Ji Luo Ji .

$memo

Gai Shu Xing Wei v1.0.0 Xin Zeng .

Guan Yu Ru He Shi Yong react-formutil Chuang Jian Gao Xing Neng Biao Dan ,Ke Yi Yue Du Zhe Pian Gao Xing Neng Biao Dan Zhi Nan Liao Jie Geng Duo .

type $memo = boolean | any[];

// false Mo Ren Zhi , Ji Bu Qi Yong Xuan Ran You Hua
// true Qi Yong Xuan Ran You Hua ,Shen Du Bi Jiao FieldDe Suo You propsHe Zi Shen Zhuang Tai
// any[] Qi Yong Xuan Ran You Hua ,Shen Du Bi Jiao $memoYi Lai Xiang Shu Zu He Zi Shen Zhuang Tai

Di Yi Yuan Ze

If the slowdown is noticeable? Shi Fou Yu Dao Liao Ming Xian De Ying Yong Xing Neng Xia Jiang ?

Ni Ke Neng Bing Bu Xu Yao $memo.

react-formutilYu Qi Ta Zhui Qiu Biao Dan Xing Neng De Biao Dan Ku Bu Yi Yang ,Ta Bei She Ji Wei Quan Ju Zhuang Tai Shi Shi Geng Xin Xuan Ran ,Yi Zai Qiang Diao Zi Ran , Yi Yong , Xiang Ying Shi ,Bi Mian Shi Yong Shi E Wai De Xin Zhi Fu Dan . Da Duo Shu Qing Kuang Xia ,Jian Dan De Biao Dan De Xing Neng Shi Ke Yi Man Zu Xu Qiu De ,Na Yao Jiu Bu Xu Yao Ke Yi Qu You Hua .

Yu Ren He Hui Ying Xiang react Ben Shen Xuan Ran Guo Cheng De You Hua Shou Duan shouldComponentUpdate PureComponent React.memoDeng Yi Yang ,Du Ke Neng Dao Zhi Zu Jian Chan Sheng Yi Xie Nan Yi Fa Xian , Zhui Zong De Yun Xing bug,Huo Zhe Dao Zhi Wei Lai De Wei Hu Chan Sheng Bu Yi Cha Jue De bug. Yin Wei $memoBen Shen Ye Jiu Shi Shi Yong Zhe Xie Ji Zhu Da Dao You Hua Mu De .

Di Er Yuan Ze

$memo Ying Dang Ying Yong Yu Ming Xian Dao Zhi Xing Neng Xia Jiang De Field Zu Jian

Yi Ban Lai Shuo ,Biao Dan Xing Neng Bian Chai (Li Ru Shu Ru Bian Qia Dun ),Bing Bu Yi Ding Shi Dang Qian De Field Xing Neng Chai ,Er Shi Gai FormXia De Mou Ge Qi Ta Zu Jian rerenderXing Neng Jiao Chai Dao Zhi De . Ying Dang Fen Xi Zhao Chu Zhe Xie Zu Jian ,Ru Guo Ta Zheng Hao Shi FieldZu Jian ,Na Yao Ke Yi Shi Yong $memoYou Hua ;Ru Guo Bu Shi FieldZu Jian ,Ke Yi Shi Yong memo-render You Hua ,Huo Zhe Zhi Jie Zai Zu Jian Nei Bu Shi Yong shouldComponentUpdateYou Hua .

Bei Jing

You Yu react-formutilDe Li Nian Shi Biao Dan Kong Zhi Qi Zhuang Tai Bei Shi Shi Zhui Zong Geng Xin ,Suo Yi Dang Yi Ge FieldDe Zhuang Tai Bian Hua ,Hui Yin Qi Zheng Ge FormDe Zhong Xin Xuan Ran ,Er Zhe You Hui Dao Zhi Qi Ta Mei You Zhuang Tai Bian Hua De FieldYe Hui Gen Zhao Yi Qi Zhong Xin Xuan Ran . Zhe Chong She Ji Dui Yu Biao Dan Fu Zuo Yong Xiang Guan De Chang Jing Shi You Hao De ,Bi Ru FieldDe Zhi Ke Yi Sui Yi Xiang Hu Yi Lai , Zheng Ge Biao Dan Zu Jian Shang Xia Wen Zhong Ke Yi Sui Yi Zi You Fang Wen Biao Dan Kong Zhi Qi Deng .

Dan Shi Zhe Chong Ling Huo Xing Zai Mou Xie Chang Jing Xia ,Bi Ru Dang Biao Dan FieldYuan Su Xian Zhu Zeng Duo ,Huo Zhe FieldXuan Ran Liao Fu Za De , Jiao Zhong De Zu Jian Shi ,Guo Yu Pin Fan De Zhong Fu Xuan Ran Hui Yin Qi Biao Dan Xing Neng Xia Jiang . Li Xiang De Zhuang Tai Xia ,Dang Ran Xi Wang Dan Ge FieldDe Xuan Ran Bu Yao Yin Qi Qi Ta Bu Xiang Guan De FieldDe Zhong Fu Xuan Ran . Dan Shi Shi Ji Shang ,FieldYu Qi Zu Jian De Fu Zuo Yong Shi Wu Fa Yu Zhi De ,react-formutilYun Xing Yu Jia She Biao Dan Shang Xia Wen Zhong Sui Shi Du Chu Chu Xian Fu Zuo Yong De Chang Jing Xia .

Dan Shi Zhe Ye Bu Yi Wei Zhao Wo Men Mei You Shou Duan Qu You Hua Biao Dan Xing Neng Liao ,Ji Ran Dan Ge FieldBian Hua Bi Ran Yin Qi Zheng Ge Biao Dan De Xuan Ran ,Na Yao Wo Men Cong Qi Ta FieldZhao Shou You Hua Ji Ke ,Ji Ru Guo Ke Yi Que Ren Gai FieldBu Yi Lai Qi Ta Biao Dan Field,Na Yao Zhi Yao Dang Ta Ben Shen De props He Zi Shen De Zhuang Tai Mo Xing Mei You Fa Sheng Bian Hua ,Jiu Ke Yi Gao Su react Tiao Guo Xuan Ran ,Yi Da Dao You Hua Mu De .

Er Zhe Zheng Shi $memoDe Zuo Yong He Yuan Li !

Zhe Li You Ge Jian Dan Shi Li :

/**
* Li Ru ,VeryHeavyComponentShi Yi Ge Xuan Ran Kai Xiao Fei Chang Da De Zu Jian ,Na Yao Wo Men Tong Guo Zhi Ding $memoShu Xing ,Lai Bi Mian Qi Ta Fei Zi Shen FieldDe Bian Hua Yin Qi Ben Zu Jian Wu Bi Yao De Bian Dong
* Gai Li Zi Zhong ,$memo=trueDe Qing Kuang Xia ,FieldHui Shen Du Bi Jiao Zi Shen De propsYi Ji Zi Shen De stateZhuang Tai ,Ru Guo Mei You Bian Hua Jiu Bu Hui Zhong Xin Xuan Ran .
* Dan Shi Qing Zhu Yi ,Ru Guo FieldYou Chuan Di Lin Shi Han Shu Shu Xing ,Ke Yi Ming Que Tong Guo $memoChuan Di Yao Bi Jiao De Yi Lai Xiang Shu Zu ,Qing Can Kao Xia Yi Ge Shi Li . Fou Ze Ke Neng Dao Zhi Fu You Hua ,Qing Yue Du Xia Fang De "Xian Jing He Bu Dang Cao Zuo "Liao Jie Geng Duo
*/
<Field name="username" $memo component={VeryHeavyComponent} />

//////////////////////////////////////////////////////////////////////////////////////////////////////////

/**
* Zhe Ge Li Zi Zhong ,Yin Wei FieldDe childrenShu Yu Ju Bu Lin Shi Han Shu ,Suo Yi Zhi Jie $memo=trueYe Bu Hui Chan Sheng You Hua Xiao Guo ,Suo Yi Wo Men Ke Yi Chuan Di Yi Ge Yi Lai Geng Xin De Zhi Shu Zu
* Zhe You Xie Lei Si HooksZhong De useMemo, useCallbackDe Di Er Ge Can Shu Zuo Yong
*/
<Field name="username" $memo={[$formutil.$params.otherFieldValue]}>
{$fieldutil => <VeryHeavyComponent someProp={$formutil.$params.otherFieldValue} />}
</Field>

/**
* $memo=[] Ze Zhi Hui Zai Zi Shen FieldZhuang Tai Bian Hua Shi Zhong Xin Xuan Ran !
* Gai Li Zi Zhong ,Ji Shi otherFieldValueGeng Xin Liao ,Zhe Ge FieldYe Bu Hui Zhong Xin Xuan Ran !
*/
<Field name="username" $memo={[]}>
{$fieldutil => <VeryHeavyComponent someProp={$formutil.$params.otherFieldValue} />}
</Field>

Yi Xie Xian Jing He Bu Dang Cao Zuo

You Yu Han Shu Shi Wu Fa Shen Du Bi Jiao (deep diff)De ,Suo Yi Qian Hou Xuan Ran Shi Chuan Di De Lin Shi Han Shu Bian Liang Zong Shi Hui Bei Ren Wei Shi Bu Xiang Deng De ,Zhe Jiu Hui Dao Zhi $memoDe Shen Du Bi Jiao Shi Bai ;Huo Zhe Chuan Di Liao Da Shu Ju Zhi Shu Xing Shi ,Shen Du Bi Jiao Xiao Lu Jiao Di ;Zhe Xie Zhuang Kuang Du Xu Yao Te Bie Zhu Yi ,Bu Neng Mao Ran Qi Yong $memo,Fou Ze Mou Xie Qing Kuang Xia Jiang Hui Dao Zhi Fu Xiang You Hua ,Fan Er Jia Zhong Ying Yong Xing Neng Xia Jiang .

Suo Yi ,Zhen Dui Yi Shang Qing Kuang :

  • Dang Field You Lin Shi Han Shu Shu Xing Shi ,Li Ru children render $parser $formatter $validatorsDeng Shu Xing Ke Neng Cun Zai Zhe Chong Xian Xiang
    • Fang Fa Yi ,Qing Jiang Zhe Xie Han Shu Shu Xing Shi Yong memoizationYou Hua ,Li Ru Bang Ding Dao Zu Jian Shi Li , Shi Yong useCallback useMemoDeng
    • Fang Fa Er ,Qing Shi Yong $memo={[...]} Ming Que Zhi Ding Yao Bi Jiao De Ke Neng Bian Dong De Zhi Yi Lai Xiang Shu Zu ,Hu Lue Diao Zhe Xie Lin Shi Han Shu Shu Xing
  • Dang Field Ju You Da Shu Ju Zhi Shu Xing Shi (Ji Shu Ju Fei Chang Pang Da ,Shen Du Bi Jiao Fei Chang Hao Xing Neng ),Bing Qie Qi You Bu Hui Bian Hua ,Qing Shi Yong $memo={[...]} Ming Que Zhi Ding Yao Bi Jiao De Ke Bian Zhi Yi Lai Xiang Shu Zu
/**
* Bad
* function children He $parserDu Shi Lin Shi Chuang Jian De Ju Bu Han Shu Bian Liang ,Hui Dao Zhi Shen Du Bi Jiao Zong Shi Shi Bai
*/
<Field name="username" $memo $parser={value => value.trim()}>
{$fieldutil => <VeryHeavyComponent value={$fieldutil.$viewValue} onChange={$fieldutil.$render} />}
</Field>;

//////////////////////////////////////////////////////////////////////////////////////////////////////////

/**
* Good
* childrenHe $parserShi Yong useCallbackChuang Jian ^_^
*/
const $parser = useCallback(value => value.trim(), []);
const render = useCallback(
$fieldutil => <VeryHeavyComponent value={$fieldutil.$viewValue} onChange={$fieldutil.$render} />,
[]
);
<Field name="username" $memo $parser={$parser}>
{render}
</Field>

/**
* Good
* Ye Ke Yi Ming Que Zhi Ding Geng Xin Yi Lai Zhi ,Li Ru Zhe Li Que Ding $parser, childrenDu Bu Yi Lai Qi Ta Zhuang Tai Zhi ,Zhi Jie Zhi Ding $memo=[]
*/
<Field name="username" $memo={[]} $parser={value => value.trim()}>
{$fieldutil => <VeryHeavyComponent value={$fieldutil.$viewValue} onChange={$fieldutil.$render} />}
</Field>;

Qi Ta Qing Kuang

$memoZhi Neng Yong Yu FieldBen Shen De You Hua ,Dan Shi Ru Guo Zheng Ge FormXia You Qi Ta Fei Yong Zuo Biao Dan Xiang De Zhong Xing Zu Jian (Ji Mei You Qian Tao Zai FieldXia ),Ke Yi Shi Yong memo-render Zuo You Hua .

Guan Yu Ru He Shi Yong react-formutil Chuang Jian Gao Xing Neng Biao Dan ,Ke Yi Yue Du Zhe Pian Gao Xing Neng Biao Dan Zhi Nan Liao Jie Geng Duo .

Zui Hou ,Xiao Ti Shi :Ke Yi Shi Yong chrome De React Devtool De ProfilerMian Ban Lai Ce Shi Ye Mian De Xing Neng Ping Jing ;Cha Kan $memoYou Hua Shi Fou Sheng Xiao ;Fen Xi Dao Zhi You Hua Shi Bai De props.

$onFieldChange

Dang Field De Zhi Sui Zhao Zui Jin Yi Ci Zhong Xin Xuan Ran Wan Cheng Hou Hong Fa Gai Hui Diao .

You Yu react De Xuan Ran Shi Yi Bu De ,Suo Yi Ru Guo Cun Zai Jiao Cha Yan Zheng ,Li Ru A Kong Jian Yi Lai Yu B Kong Jian De Zhi Qu Xiao Yan Zi Shen ,Na Yao Zhe Chong Qing Kuang Xia ,B De Zhi Bian Geng Bing Bu Hui Dao Zhi A Li Ji Qu Ying Yong Xin De Zhi Qu Xiao Yan . Suo Yi Zhe Chong Qing Kuang Xia ,Ke Yi Tong Guo Gai Shu Xing She Zhi Hui Diao ,Zhu Dong Qu Hong Fa Xiao Yan A Kong Jian .

Zhu Yi :

  1. Gai Hui Diao Bing Bu Hui Zai Diao Yong $render $setValues Deng Geng Xin Biao Dan Zhi De Fang Fa Hou Li Ji Hong Fa ,Ta Hui Sui Zhao Zui Xin De Yi Ci react Xuan Ran Zhi Xing . Ye Zheng Yin Wei Ci ,Suo Yi Cai Neng Na Dao Bian Geng Hou De Biao Dan De Zhi He Zhuang Tai .
  2. Jin Dang Dang Qian Field De Zhi (Zhuang Tai Li De $value)You Bian Dong Shi Cai Hui Hong Fa ,Qi Ta Zhuang Tai Li Ru $diry $touched Deng Bian Hua Bu Hui Hong Fa .
  3. Ru Guo Xu Yao Fang Wen DOM Event,Qing Shi Yong onChange Bang Ding DOM Jie Dian Fang Wen Ji Ke .
  4. Bu Yao Zai Gai Hui Diao Li Zai Ci Xiu Gai Dang Qian Field De Zhi ,Fou Ze Hui Xian Ru Si Xun Huan (Xiu Gai Gai Field De Qi Ta Zhuang Tai Huo Zhe Xiu Gai Qi Ta Field De Zhi Shi An Quan De ).
//... ">//Zai BDe Zhi Bian Geng Bing Qie Xuan Ran Wan Bi Hou ,Zhu Dong Zai Ci Yao Qiu AZu Jian Jin Xing Yi Ci Xiao Yan
<Field name="B" $onFieldChange={(newValue, preValue) => $formutil.$getField('A').$validate()}>
//...
Field>

$reserveOnUnmount

Gai Shu Xing Wei v0.5.1 Xin Zeng .

Mo Ren Qing Kuang Xia ,Dang Yi Ge FieldBei Cong Zu Jian Shu Yi Chu Shi (componentWillUnmount),Hui Cong FormKong Zhi Qi Zhong Qu Xiao Zhu Ce ,Zhe Jiang Hui Dao Zhi Gai Field De Zhuang Tai Cong Biao Dan Kong Zhi Qi Zhuang Tai Ji He Zhong Yi Chu (Li Ru ,$params $errorsDeng Zhong Bu Zai You Gai Field De Zhi , Cuo Wu Xin Xi Deng )

Ru Guo Ni Xi Wang Field Yi Chu Shi ,Zai Form Kong Zhi Qi Zhong Bao Liu Gai Field De Zhuang Tai ,Na Yao Ke Yi Chuan Di $reserveOnUnmountShu Xing Wei trueJi Ke . Dang Gai Field Zai Ci Gua Zai Dao Zu Jian Shu Zhong Shi ,Hui Ji Cheng Zhi Qian Suo You De Zhuang Tai ,Wan Quan Hui Fu !

<Field name="username" $reserveOnUnmount />
// OR
<Field name="username" $reserveOnUnmount={true} />

$parser

Zhe Li Jie Shao De Shi Zhen Dui 0.5.0Yi Hou Ban Ben . Ru Guo Ni Zai Shi Yong Zhi Qian De Ban Ben ,Qing Can Kao :$parser

Dang Yong Hu Zai Biao Dan Zhong Jin Xing Shu Ru Shi (Zhu Dong Geng Xin Shi Tu ),Shi Tu Zhong De Zhi Zai Geng Xin Dao Zhuang Tai Mo Xing Zhong Qian ,Hui Jing Guo $parser Chu Li .

// Tong Guo $parserShu Xing Lai Guo Lu Qian Hou Shu Ru Kong Ge
<Field name="fieldName" $parser={(viewValue, $setViewValue) => viewValue.trim()}>
//...
Field>

Zhu Yi ,Shang Shu Xie Fa Bu Hui Xiu Gai Dang Qian Shi Tu Zhi ,Ta Jin Jin Ying Xiang Zhuang Tai Mo Xing Zhong De Zhi . Ru Guo Xi Wang Xian Zhi Yong Hu De Shu Ru (Li Ru Jin Zhi Yong Hu Shu Ru Ren Yi Kong Ge ),Ke Yi Tong Guo $parserDe Di Er Ge Can Shu $setViewValue,Lai Zai Yong Hu Mei Ci Shu Ru Hou Li Ji Geng Xin Shi Tu Zhi .

// Tong Guo $parserShu Xing Lai Guo Lu Qian Hou Shu Ru Kong Ge
<Field name="fieldName" $parser={(viewValue, $setViewValue) => $setViewValue(viewValue.trim())} />

$formatter

Zhe Li Jie Shao De Shi Zhen Dui 0.5.0Yi Hou Ban Ben . Ru Guo Ni Zai Shi Yong Zhi Qian De Ban Ben ,Qing Can Kao :$formatter

Dang Zai Biao Dan Mo Xing Zhong Zhu Dong Geng Xin Mo Xing Zhi Shi ,Hui Tong Guo $formatter Jiang Mo Xing Zhong De Zhi Zhuan Huan Wei $viewValueHou Chuan Di Gei Shi Tu Xuan Ran .

// Tong Guo $formatterJiang Mo Xing Zhong De Zhi Zhuan Huan Wei Biao Zhun De Jin E Shu Xie Ge Shi
<Field name="amount" $formatter={(value, $setModelValue) => priceFormat(value)} />

$formatterTong Yang You Yi Ge Hui Diao Fang Fa $setModelValue,Ta Ke Yi Yong Lai Zai Chu Li Mo Xing Zhi Shi Zai Ci Dui Qi Jin Xing Xiu Gai .

$ref

Gai Shu Xing Wei v0.5.11 Xin Zeng .

Ke Yi Tong Guo Gai Shu Xing Chuan Di Yi Ge Hui Diao Han Shu Huo Zhe Yi Ge RefObjectDui Xiang ,Yong Lai Huo Qu Gai Field De $fieldutilDui Xiang ,Yi Zai Qi context Wai Bu Fang Wen :

let curFieldutil;
<Field name="username" $ref={$fieldutil => (curFieldutil = $fieldutil)} />;

const ref = React.createRef();
<Field name="username" $ref={ref} />;

Qi Yong Fa Lei Si Yu React Zu Jian Ben Shen De ref Shu Xing Yong Fa ,Dan Shi Yu ref={Function}Bu Tong De Shi ,You Yu $fieldutilShi Yi Ge Mei Ci render Du Hui Zhong Xin Sheng Cheng De ImmutableDui Xiang ,Suo Yi Chuan Di Gei $refDe Hui Diao Han Shu Ye Hui Sui Zhao Mei Ci render Bei Diao Yong . Suo Yi ,Bu Yao Zai Hui Diao Han Shu Li Zuo Ren He You Fu Zuo Yong De Cao Zuo !

$fieldutil

$fieldutil Bao Han Liao Dang Qian FieldDui Xiang De Zhuang Tai Mo Xing Yi Ji Yi Zu Yong Lai Geng Xin Zhuang Tai Mo Xing De Fang Fa . Ta Hui Bei Chuan Di Gei Shi Tu Zu Jian Yong Lai Tong Bu He Geng Xin Biao Dan De Zhuang Tai Zhi .

{
$value: "", //Biao Dan Yu Zhuang Tai Mo Xing Zhi
$viewValue: "", //Biao Dan Yu Shi Tu Zhi ,$valueHe $viewValueKe Yi Tong Guo $parserHuo Zhe $formatterXiang Hu Zhuan Huan
$dirty: false, //Shi Fou Xiu Gai Guo Biao Dan Xiang
$pristine: true, //Yu $dirtyXiang Fan
$touched: false, //Shi Fou Jie Hong Guo Biao Dan
$untouched: true, //Yu $touchedXiang Fan
$focused: false, //Shi Fou Ju Jiao Dao Dang Qian Shu Ru
$valid: true, //Biao Dan Xiang Xiao Yan Jie Guo Shi Fou Tong Guo
$invalid: false, //Yu $validXiang Fan
$error: {}, //Biao Dan Xiao Yan Cuo Wu Xin Xi
$pending: false, //Yi Bu Xiao Yan Shi Gai Zhi Jiang Wei true

/*** Shang Mian Shi Zhuang Tai Mo Xing ,Xia Mian Shi Ke Yong Fang Fa ***/

$getState: () => $state, //Fan Hui Dang Qian Zhuang Tai Mo Xing Dui Xiang
$reset: ($newState) => $state, //Zhong Zhi Wei Chu Shi Zhuang Tai , $newStateCun Zai De Hua ,Hui Zuo Yi Ge He Bing
$getComponent: (name) => FieldComponent, //Fan Hui FieldZu Jian Shi Li

$render: (value, callback) => {}, //Geng Xin Biao Dan Yu Shi Tu Zhi ,callbackKe Xuan ,Hui Zai Zu Jian Geng Xin Hou Hui Diao
$setValue: (value, callback) => {}, //Zhi Jie Geng Xin Biao Dan Yu Mo Xing Zhi ,callbackKe Xuan . $setValueYu $renderDe Qu Bie Zai Yu ,Qian Zhe De Zhi Hui Jing Guo $parserChu Li Hou Zai Geng Xin Dao Biao Dan Mo Xing Zhong ,Hou Zhe Ze Bu Hui .
$setDirty: $dirty => {}, //She Zhi $dirtyZhuang Tai
$setTouched: $touched => {}, //She Zhi $touchedZhuang Tai
$setFocused: $focused => {}, //She Zhi $focusedZhuang Tai
$setState: $newState => {} //Zhi Jie Geng Xin Zhuang Tai ,Qi Shi Shang Mian De Ji Ge Fang Fa Du Shi Ji Yu $setState
$setValidity: ($key, $valid) => {} //She Zhi Xiao Yan , $validWei trueDai Biao Xiao Yan Tong Guo ,Qi Ta Zhi Biao Shi Xiao Yan Shi Bai ,Bing Dang Zuo Cuo Wu Yuan Yin
$setError: ($error) => {} //Zhi Jie She Zhi Cuo Wu Zhuang Tai
$validate: () => {} //Hong Fa Zai Ci Xiao Yan

Gai Dui Xiang Hui Chuan Di Gei Zi Zu Jian ,Zi Zu Jian Ke Yi Li Yong Qi Zhong De Fang Fa Lai Tong Bu , Xiu Gai Biao Dan Yu Zhuang Tai Mo Xing :

  • Yong Hu Shu Ru Shi Xu Yao Tong Guo Diao Yong $renderLai Geng Xin Xin Zhi Dao Zhuang Tai Zhong
  • Xuan Ran Biao Dan Xiang Shi ,Ying Gai Shi Yong Shou Kong Zu Jian ,Bing Qie Gen Ju Zhuang Tai Mo Xing Zhong De $viewValue Lai Xuan Ran Zhi (Bu Jian Yi Shi Yong $valueLai Xuan Ran Shi Tu ,Yin Wei Zhe Yang Jiu Wu Fa Shi Yong $parser $formatterLai Dui Shu Ju Zuo Er Ci Guo Lu )
  • Cuo Wu Xin Xi He Xiao Yan Zhuang Tai Ke Yi Tong Guo $dirty $invalid $error Deng Lai Xuan Ran

Xu Yao Qiang Diao De Shi ,Field Mo Ren Bu Tong Bu $touched/$untouched, $focused Zhuang Tai ,Zhi You $dirty/$pristineHui Zi Dong Tong Bu (Shou Ci Diao Yong $renderHui Zi Dong Tong Bu $dirtyZhuang Tai ) Ru Guo Ni Xu Yao Qi Ta Zhuang Tai ,Xu Yao Zi Ji Qu Bang Ding Xiang Guan Shi Jian Lai Geng Xin Zhuang Tai :

<Field name="username">
{$fieldutil => (
<input
value={$fieldutil.$viewValue}
onChange={ev => $fieldutil.$render(ev.target.value)}
onFocus={ev => $fieldutil.$setFocused(true)}
onBlur={ev => $fieldutil.$setTouched(true) && $fieldutil.$setFocused(false)}
/>
)}
Field>

Xia Mian Shi $fieldutilZhong Shu Xing De Geng Duo Jie Shi :

$value

Dang Qian Biao Dan Yu De Zhuang Tai Mo Xing Zhi . Cong Biao Dan Kong Jian Zhong Huo Qu De Zhi Bao Cun Zai Gai Zi Duan Xia . Gai Zhi Hui Bei Tong Bu Dao Zheng Ge Biao Dan De $paramsZhong .

$viewValue

Gai Shu Xing Wei v0.5.0 Xin Zeng

Dang Qian Biao Dan Yu De Shi Tu Zhi . Yi Ban Qing Kuang Xia Qi Deng Tong Yu $value.

Dang Ni Zi Ding Yi Liao $parserShi ,Hui Dao Zhi Shi Tu Zhi Yu Biao Dan Zhi Bu Yi Zhi ,Ci Shi Xuan Ran Shi Tu Shi Ying Dang Shi Yong $viewValueLai Xuan Ran .

Shi Shi Shang ,Dang Ni Xu Yao Gen Ju Biao Dan Zhi Geng Xin Field Shi Tu Shi ,Ni Ying Dang Zong Shi Shi Yong $viewValue Lai Dai Ti $value,Zhe Zong Shi An Quan De !

$dirty | $pristine | $touched | $untouched | $invalid | $valid | $focused | $pending

Dang Qian Biao Dan Yu De Qi Ta Zhuang Tai :

  • $dirty Kong Jian Bei Xiu Gai Guo
  • $pristine Kong Jian Mei You Bei Xiu Gai Guo ,Yu $dirty Hu Chi
  • $touched Kong Jian Shi Qu Guo Jiao Dian
  • $untouched Kong Jian Mei You Shi Qu Guo Jiao Dian
  • $focused Jiao Dian Shi Fou Zai Dang Qian Kong Jian
  • $valid Biao Dan Suo You Kong Jian Jun Xiao Yan Tong Guo
  • $invalid Biao Dan Zhong You Zhi Shao Yi Ge Kong Jian Xiao Yan Bu Tong Guo
  • $pending Shi Fou Zheng Zai Jin Xing Yi Bu Jian Cha
$error

Bao Cun Liao Dang Qian Biao Dan Yu De Cuo Wu Xin Xi . Ta Shi Yi Ge { [validdate key]: [error message] }Dui Xiang .

Dang Mei You Ren He Cuo Wu Xin Xi Shi ,Ta Shi Yi Ge Kong Dui Xiang . Suo Yi ,Xu Yao Pan Duan Dang Qian Biao Dan Yu Shi Fou You Cuo Wu Shi ,Ying Dang Tong Guo $invalid $validLai Pan Duan !

$new()

Gai Shu Xing Wei v0.5.0 Xin Zeng .

Huo Qu Zui Xin De $fieldutil.

Mei Yi Ci Xuan Ran Hou ,FieldChuan Di De $fieldutilDui Xiang Du Shi Dang Qian De Zhuang Tai De Kuai Zhao . Dang Yi Bu Huo Zhe Hui Diao Fang Fa Zhong Chuan Di $fieldutilDui Xiang ,Na Dao De Ke Neng Yu Zui Xin De Zhuang Tai Bu Yi Zhi . Ke Yi Tong Guo Gai Fang Fa Huo Qu Dao Zui Xin Yi Ci Xuan Ran Hou De $fieldutilDui Xiang !

$getState()

Gai Shu Xing Wei v0.5.0 Xin Zeng . Ru Guo Ni Zai Shi Yong Jiu Ban Ben ,Qing Shi Yong $picker()Dai Ti .

Fan Hui Field De Chun Cui Zhuang Tai (Bu Bao Han Ren He Xia Fang De Fang Fa )

$reset()
// Qi Han Shu Qian Ming Ru Xia
// 0.5.0Qi ,Tong Shi Zhi Chi Can Shu Hui Diao ,Yi Ji PromiseHui Diao
$reset($newState?: Partial<FieldState>, ($fieldutil: $Fieldutil) => void): Promise<$Fieldutil>;

Zhong Zhi Dang Qian Biao Dan Yu Ming Wei Chu Shi Zhuang Tai ,Ji Suo You De $value $viewValue $dirtyDeng Zhuang Tai Du Hui Hui Fu Wei Chu Shi Zhuang Tai .

$getComponent()

Huo Qu Dang Qian Biao Dan Yu De Shi Li Dui Xiang Yin Yong (Xu Ni dom)

$setState($newState)
// Qi Han Shu Qian Ming Ru Xia
// 0.5.0Qi ,Tong Shi Zhi Chi Can Shu Hui Diao ,Yi Ji PromiseHui Diao
$setState($newState: Partial<FieldState>, ($fieldutil: $Fieldutil) => void): Promise<$Fieldutil>;

She Zhi Xin De $state,$newStateHui Yu Dang Qian $stateHe Bing

$setState({
$dirty: true,
$value: '124'
});
$render()
// Qi Han Shu Qian Ming Ru Xia
// 0.5.0Qi ,Tong Shi Zhi Chi Can Shu Hui Diao ,Yi Ji PromiseHui Diao
$render($viewValue: any, ($fieldutil: $Fieldutil) => void): Promise<$Fieldutil>;

Geng Xin Biao Dan Yu De Shi Tu Zhi ,Bing Qie Gai Zhi Hui Jing Guo $parserChu Li Hou Geng Xin Dao Biao Dan Yu De Zhuang Tai Mo Xing Zhong .

Ling Wai Ru Guo Gai Biao Dan Yu Mo Xing Zhuang Tai Zhong De $dirtyWei false,Ye Hui Tong Shi Jiang $dirtyShe Zhi Wei true($pristineWei false).

Ti Xing Dang Cong Biao Dan Kong Jian Zhong Tong Bu Zhi Shi ,Ying Dang Shi Yong $render,Er Bu Shi $setValue!

$setValue()
// Qi Han Shu Qian Ming Ru Xia
// 0.5.0Qi ,Tong Shi Zhi Chi Can Shu Hui Diao ,Yi Ji PromiseHui Diao
$setValue($value: T, ($fieldutil: $Fieldutil) => void): Promise<$Fieldutil>;

Geng Xin Biao Dan Yu De Mo Xing Zhi ,Bing Qie Gai Zhi Hui Jing Guo $formatterHou Geng Xin Dao Shi Tu Shang .

$setDirty($dirty) | $setTouched($touched) | $setFocused($focused) | $setValidity(errKey, result)
// Qi Han Shu Qian Ming Ru Xia
// 0.5.0Qi ,Tong Shi Zhi Chi Can Shu Hui Diao ,Yi Ji PromiseHui Diao
$setDirty($dirty: boolean, callback?:($fieldutil: $Fieldutil) => void): Promise<$Fieldutil>;
$setTouched($dir$touchedty: boolean, callback?:($fieldutil: $Fieldutil) => void): Promise<$Fieldutil>;
$setFocused($focused: boolean, callback?:($fieldutil: $Fieldutil) => void): Promise<$Fieldutil>;
$setValidity(validKey: string, result: any, callback?:($fieldutil: $Fieldutil) => void): Promise<$Fieldutil>;

She Zhi $dirty $touched $error Deng Zhuang Tai

$setDirty(true);
$setTouched(true);
$setFocused(true);
$setValidity('required', 'Bi Xu Tian Xie '); //Di Er Ge Can Shu Bu Wei true,Ze Biao Shi Xiao Yan Shi Bai ,Bing Dang Zuo Cuo Wu Miao Shu
$setValidity('required', true); //Biao Shi Xiao Yan Tong Guo
$setError($error)
// Qi Han Shu Qian Ming Ru Xia
// 0.5.0Qi ,Tong Shi Zhi Chi Can Shu Hui Diao ,Yi Ji PromiseHui Diao
$setError($error: FieldError, callback?: ($fieldutil: $Fieldutil) => void): Promise<$Fieldutil>;

Zhi Jie Ti Huan Dang Qian Biao Dan Yu De $error.

$setError({
required: 'Bi Xu Tian Xie ',
maxLength: 'Bu Neng Chao Guo 10Ge Zi Fu '
});
$validate()
// Qi Han Shu Qian Ming Ru Xia
// 0.5.0Qi ,Tong Shi Zhi Chi Can Shu Hui Diao ,Yi Ji PromiseHui Diao
$validate(callback?: ($fieldutil: $Fieldutil) => void): Promise<$Fieldutil>;

Shou Dong Hong Fa Xiao Yan Field. Yi Ban Qing Kuang Xia ,Ni Wu Xu Zhe Yao Zuo ,Dang Zhi Gai Bian Shi ,Hui Zi Dong Diao Yong She Ding De Xiao Yan Han Shu . Jin Dang Ni De Xiao Yan Han Shu Yi Lai Yu Qi Ta Zhi Shi ,Zai Qi Ta Zhi Gai Bian Shi ,Ni Ke Yi Tong Guo Gai Fang Fa Shou Dong Hong Fa Xiao Yan .

Gai Fang Fa Ke Yi Chuan Di Yi Ge Hui Diao Han Shu ,Huo Zhe Tong Guo Qi Fan Hui Zhi Promise Lai Jian Ting Xiao Yan Wan Cheng .

Qing Zhu Yi Dang Ni Shou Dong Yun Xing Liao Xiao Yan Han Shu Shi ,Ru Guo Qi Zhong Bao Han Yi Bu Xiao Yan ,Zai Xiao Yan Wan Cheng Qian ,Field De Zhi Ke Neng Zai Ci Fa Sheng Bian Hua ,Na Yao Hui Dao Zhi Xiao Yan Zhong Xin Yun Xing . Ci Shi ,Hui Diao Han Shu Yi Ji Promise Hui Diao Du Jiang Yan Chi Dao Zui Hou Yi Ci Xiao Yan Wan Cheng Hou Hong Fa ,Bing Qie Hui Bao Chi Ni De Diao Yong Shun Xu !

$onValidate()
// Qi Han Shu Qian Ming Ru Xia
// 0.5.1Qi ,Tong Shi Zhi Chi Can Shu Hui Diao ,Yi Ji PromiseHui Diao
$onValidate(callback?: ($fieldutil: $Fieldutil) => void): Promise<$Fieldutil>;

Que Bao Dang Qian Field Xiao Yan Jie Shu Hou Jin Xing Hui Diao Cao Zuo . Yin Wei Ru Guo Field You Yi Bu Xiao Yan ,Zai Ni Geng Gai Liao Field De Zhi Hou ,Ke Neng Xiang Zai Xiao Yan Jie Shu Hou ,Gen Ju Field Zui Xin De Zhuang Tai Lai Zuo Yi Xie Cao Zuo ,Ci Shi Ke Yi Jiu Shi Yong Gai Fang Fa .

$getFirstError()

Huo Qu Dang Qian Biao Dan Yu De Cuo Wu Xiang Zhong De Shou Ge Cuo Wu Miao Shu . You Yu $errorShi Ge Dui Xiang ,Suo Yi Zhe Li Ti Gong Liao Yi Ge Fang Fa Jian Hua Cuo Wu Xin Xi De Huo Qu .

<Field>
{$fieldutil => (
<div>
<input value={$fieldutil.$viewValue} onChange={ev => $fieldutil.$render(ev.target.value)} />
{$fieldutil.$invalid && <p className="error">{$fieldutil.$getFirstError()}p>}
div>
)}
Field>
$$formutil

Dang Qian Biao Dan Yu Suo Shu De Form De $formutilDui Xiang ,Ta Bao Han Liao Zheng Ge Biao Dan De Zhuang Tai Yi Ji Yi Xie Cao Zuo Fang Fa ,Ju Ti Ke Yi Can Kao Xia Fang Form Shuo Ming .

Te Bie Zhu Yi ,Zhe Li $$formutilShi Shuang $Fu Hao Da Tou ,Biao Shi Bu Tui Jian Shi Yong . Jue Da Duo Shu Qing Kuang Xia ,Dui Dang Qian Biao Dan Yu De Fang Wen Ying Dang Tong Guo $fieldutilLai Wan Cheng Zhuang Tai De Huo Qu Yu Shou Ji .

<Field name="username">
{ $fieldutil => <input onChange={ev => $fieldutil.$render(ev.target.value)} onFocus={ev => $fieldutil.$$formutil.$validates()} />
</Field>

withField(Component)

Te Bie Zhu Yi :v0.4.0 Ban Ben Qi ,withFieldJiang Hui Ba Zhuang Tai He Fang Fa Du Fang Dao $fieldutilDui Xiang Zhong Chuan Di Gei Bei Zhuang Shi De Zu Jian !!Zhe Yu Zhi Qian De Fang Shi You Suo Qu Bie ,Qing Liu Yi .

withField Shi Yi Ge Gao Jie Zu Jian ,Ta Ji Yu FieldZu Jian Shi Xian . Ke Yi Tong Guo withField De Di Er Ge Ke Xuan Can Shu Lai Wei Sheng Cheng De Biao Dan Yu Zu Jian She Zhi Mo Ren De props!

this.props.$fieldutil.$render(ev.target.value); render() { return ; } } export default withField(FieldCustom, { $defaultValue: '1234' // Gai Xiang Jiang Chuan Di Gei FieldZu Jian });">import React from 'react';
import { withField } from 'react-formutil';

class FieldCustom extends React.Component {
onChange = ev => this.props.$fieldutil.$render(ev.target.value);

render() {
return <input onChange={this.onChange} value={this.props.$fieldutil.$viewValue} />;
}
}

export default withField(FieldCustom, {
$defaultValue: '1234' // Gai Xiang Jiang Chuan Di Gei FieldZu Jian
});

withFieldTong Yang Zhi Chi Zhuang Shi Qi Yu Fa

@withField
class MyField extends Component {}

//or pass some default props
@withField({
$defaultValue: '123'
})
class MyField extends Component {}

Wo Men Shen Zhi Ti Gong De Zhi Shi Di Ceng Kong Zhi ,Bing Bu Neng Zhi Jie Zhuan Huan Wei Sheng Chan Li . Shi Ji Shi Yong Zhong ,Huan Xu Yao Shi Yong FieldLai Gua Pei Zi Ji Xiang Mu Suo Yong De Biao Dan UI Zu Jian .

Suo Yi Wo Men Ye Ti Gong Liao Yi Ge EasyFieldZu Jian ,Ta Tong Guo FieldJiang Liu Lan Qi Zhi Chi De Yuan Sheng Biao Dan Kong Jian Du Shi Xian Liao Zhi Chi ,Bing Qie Zhi Chi Duo Xuan Zu He Dan Xuan Zu :Zhi Xu Yao Zhi Ding typeShu Xing Jiu Ke Yi Shi Yong Liao

Tong Shi ,Ye Ti Gong Liao Tong Yi De Zhi Bian Dong Yu Huo Qu Bang Ding De API(Tong Guo Biao Zhun De value onChange onFocus onBlurDeng Shu Xing ,Da Bu Fen Liu Xing De Zu Jian Ku ,Li Ru ant-designDe data-entryZu Jian Du Shi Xian Liao Zhe Chong Tong Yi , Gui Fan De Dui Wai Fang Wen Fang Shi ).

Te Bie Ti Xing :EasyFieldHui Mo Ren Dui Suo You De Zi Fu Chuan Shu Ru Zuo Qian Hou Kong Ge De Guo Lu . Ru Guo Bu Xu Yao Zhe Ge Te Xing ,Ke Yi Tong Guo Zhong Xie $parserShu Xing Huo Zhe Jiang Qi She Zhi Wei nullLai Guan Bi Gai Gong Neng :

<EasyField name="name" type="username" $parser={value => value} />
// OR
<EasyField name="name" type="username" $parser={null} />

$fieldHandler

Yu FieldXiang Xia Chuan Di $fieldutilDui Xiang Lei Si ,EasyFieldYe Hui Xiang Xia Chuan Di Yi Ge $fieldHandlerDe Dui Xiang .

$fieldHandlerYu $fieldutilShi Bu Tong De ,Ta Shi Yi Ge Biao Zhun De Bao Han value onChange onFocus onBlurSi Ge Shu Xing De data-entryJiao Hu Gui Fan API. Dang Ran ,Ni Ye Ke Yi Tong Guo Zhi Ding valuePropname changePropName focusPropName blurPropName Shu Xing Lai Xiu Gai Bao Lou De Jie Kou Fang Fa Shu Xing Ming .

Zhe Yi Wei Zhao ,Suo You Zhi Chi Zhe Si Ge Shu Xing (Huo Zhe Bu Fen Zhi Chi )De Zu Jian ,Du Ke Yi Qian Tao /Chuan Di Gei EasyFieldShi Yong !

// $fieldHandlerDe Mo Ren Jie Gou . Tong Guo Zhi Ding valuePropName changePropNameHuo Zhe passUtilShu Xing ,Du Hui Ying Xiang Shi Ji De $fieldHandlerZhong De Zhi . 
// value Biao Dan Xiang De Zhi 
// onChange Zhi Bian Dong Hui Diao ,Geng Xin Zhi Dao Biao Dan Kong Zhi Qi Zhong 
// onFocus Yong Lai Tong Bu $focusedZhuang Tai 
// onBlur Yong Lai Tong Bu $focused $touchedDeng Zhuang Tai 
{
 value, onChange, onFocus, onBlur;
}