說明

原本我想把整個(gè)redux-form中知識(shí)點(diǎn)與使用技巧通過這個(gè)小系列短文全面總結(jié)出來的，但是此過程中發(fā)現(xiàn)問題的確不少。但同時(shí)，在參考國內(nèi)外一些相關(guān)資源的同時(shí)，又發(fā)現(xiàn)了一個(gè)比redux-form更值得研究的東西。先賣個(gè)關(guān)子（可能有少數(shù)朋友已經(jīng)有所了解），稍過一些時(shí)間我會(huì)專門撰文介紹。因此，臨時(shí)把本文作為此小系列的結(jié)束篇，敬請(qǐng)有志于學(xué)習(xí)redux-form有朋友原諒（當(dāng)然，在你了解到我介紹的那個(gè)更好用的form wrapper后你更為有所體諒）。

成都創(chuàng)新互聯(lián)公司從2013年成立，是專業(yè)互聯(lián)網(wǎng)技術(shù)服務(wù)公司，擁有項(xiàng)目成都網(wǎng)站制作、成都做網(wǎng)站網(wǎng)站策劃，項(xiàng)目實(shí)施與項(xiàng)目整合能力。我們以讓每一個(gè)夢(mèng)想脫穎而出為使命，1280元北關(guān)做網(wǎng)站,已為上家服務(wù),為北關(guān)各地企業(yè)和個(gè)人服務(wù),聯(lián)系電話:13518219792

引言

redux-form官方網(wǎng)站提供了操作form的許多API，其中最重要的無外乎三個(gè)：reduxForm(config:Object) 、props和 。

本文專注于分析的基本使用方法及注意事項(xiàng)，但是閱讀本語言的前提是需要你先初步掌握reduxForm(config:Object) 和props這兩個(gè)API的使用。有關(guān)這兩個(gè)API，在前面的幾篇中我們已經(jīng)探討了許多，其實(shí)還有很多更深入的內(nèi)容會(huì)在接下來的文章中進(jìn)行解析。使用一個(gè)單篇來介紹這個(gè)API的另一個(gè)原因是，這個(gè)API本身比較復(fù)雜與典型，掌握了這個(gè)API使用后，你會(huì)輕松把握另外兩個(gè)相關(guān)聯(lián)的API：和。

的作用

遠(yuǎn)非官方基本示例中使用得那么簡(jiǎn)單。其實(shí)，所有需要與Redux store 數(shù)據(jù)連接的表單中的輸入組件（包括可能的多層次嵌套輸入組件），都可以用 實(shí)現(xiàn)。

使用三原則

在正確使用這個(gè)API之前，你需要牢記下面三條基本原則：

（一）必須提供name屬性

此屬性值可以是簡(jiǎn)單的字符串，如 userName、password，也可以是使用點(diǎn)和中括號(hào)串聯(lián)表達(dá)的代表路徑含義的復(fù)雜的字符串結(jié)構(gòu)，如 contact.billing.address[2].phones[1].areaCode。

（二）必須提供component屬性

此屬性值可以是一個(gè)React組件（Component）、無狀態(tài)函數(shù)（stateless function）或者是DOM所支持的默認(rèn)的標(biāo)簽（分別是input、textarea和select)元素。

（三）其他屬性

能夠傳遞給的屬性有許多。如前方所強(qiáng)調(diào)的，其中name和component屬性是必須提供的，截止目前最新版本為止，還有下面一些屬性是可選提供的：

• format
• normalize
• onBlur
• onChange
• onDragStart
• onDrop
• onFocus
• props
• parse
• validate
• warn
• withRef
• immutableProps

官文原文中說法是“All other props will be passed along to the element generated by the component prop.”直譯過來，好像是“其他所有屬性會(huì)被傳遞給由component屬性生成的元素”。但是，這種理解本人感覺十分不妥，又有同學(xué)Ted Yuen的翻譯成“其他所有屬性會(huì)通過prop傳遞到元素生成器中。如 className?！备杏X也不是很恰當(dāng)。還是讓我們隨著本文最后面復(fù)雜的示例討論來確定如何理解這一句吧。

使用的前提——導(dǎo)入API

var Field = require('redux-form').Field; // ES5

import { Field } from 'redux-form'; // ES6

component屬性使用三情形

組件的屬性中，component這個(gè)屬性相對(duì)比較復(fù)雜，也非常重要，下面作專門討論。從源碼分析來看，component屬性最終是被傳遞給React.createElement()的，于是component存在三種類型的取值，如下所示。

使用方式一：component={React組件}

這種情形下 ，component屬性值可以是任何自定義的組件或者從其他第三方庫導(dǎo)入的React組件。定義組件的代碼請(qǐng)參考：

// MyCustomInput.js
import React, { Component } from 'react'

class MyCustomInput extends Component {
  render() {
    const { input: { value, onChange } } = this.props
    return (
      

        The current value is {value}.
         onChange(value + 1)}>Inc
         onChange(value - 1)}>Dec
      
    )
  }
}

然后在你的表單組件定義代碼中便可以這樣使用：

import MyCustomInput from './MyCustomInput'

...

使用方式二：component={無狀態(tài)函數(shù)}

這是使用 的最靈活的方法，因?yàn)槭褂眠@種方法可以使你完全控制表單輸入組件的渲染方式。而且，這種方式對(duì)于顯示校驗(yàn)錯(cuò)誤信息特別有用。當(dāng)然，這種使用思路對(duì)于從以前版本的 redux-form使用轉(zhuǎn)移過來的程序員來說是十分熟悉的。

【切記】必須在render() 方法外部定義上述無狀態(tài)函數(shù)；否則，它會(huì)隨著每次渲染都會(huì)被重新創(chuàng)建，從而由于組件的 prop發(fā)生了變化而使得系統(tǒng)強(qiáng)制 重新渲染。如果你在 render() 方法內(nèi)部定義無狀態(tài)函數(shù)，這不但會(huì)拖慢你的app，而且input組件每次都會(huì)在組件重新渲染的時(shí)候失去焦點(diǎn)。

// outside your render() method
const renderField = (field) => (
    

      
      {field.meta.touched && field.meta.error &&
       {field.meta.error}}
    
  )

// inside your render() method

使用方式三：component=“input”或者component=“select”或者component=“textarea”

這種使用情況比較簡(jiǎn)單，比如創(chuàng)建一個(gè)文字輸入框組件，你只需要使用如下方式：

<Field component="input" type="text"/>

易見，這種方式是把傳統(tǒng)DOM元素用API稍微一封裝，并指明相應(yīng)的type屬性類型即可。

一個(gè)復(fù)雜的例子

說明：本例中的代碼大部分來自于官方網(wǎng)站提供的redux-form-field-level-validation.js這個(gè)文件，也就是有關(guān)于在一個(gè)redux-form表單中進(jìn)行按字段校驗(yàn)的情況。但是，有幾句代碼作了修改，有興趣的同學(xué)請(qǐng)認(rèn)真觀察分析（為了便于參考，我把這個(gè)文件的修改版本的完整代碼列舉如下）：

import React from 'react'
import { Field, reduxForm } from 'redux-form'

const required = value => value ? undefined : 'Required'
const maxLength = max => value =>
  value && value.length > max ? `Must be ${max} characters or less` : undefined
const maxLength25 = maxLength(15)
const number = value => value && isNaN(Number(value)) ? 'Must be a number' : undefined
const minValue = min => value =>
  value && value < min ? `Must be at least ${min}` : undefined
const minValue18 = minValue(18)
const email = value =>
  value && !/^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,4}$/i.test(value) ?
  'Invalid email address' : undefined
const tooOld = value =>
  value && value > 65 ? 'You might be too old for this' : undefined
const aol = value =>
  value && /.+@aol\.com/.test(value) ?
  'Really? You still use AOL for your email?' : undefined

const renderField = ({ input, label, type, custom001,meta: { touched, error, warning } }) => (
  

      

          input
          
{JSON.stringify(custom001)}
      
    {label}
    

      
      {touched && ((error && {error}) || (warning && {warning}))}
    
  
)
const selects = [
    {
        text:'-- Select --',
        value:'-1'
    },
    {
        text:'Red',
        value:'ff0000'
    },
    {
        text:'Green',
        value:'00ff00'
    },
    {
        text:'Blue',
        value:'0000ff'
    }
]

const selectField = ({
                         input,
                         label,
                         selects,
                         meta: { touched, error, warning }
                     }) => (
    

        

            {label}
            
                {
                    selects.map((item, i) => (
                        {item.text}
                    ))
                }
            
        
        {touched &&
        ((error && 
{error}
) ||
            (warning && 
{warning}
))}
    
)
const FieldLevelValidationForm = (props) => {
  const { handleSubmit, pristine, reset, submitting } = props
  return (
    

      
      
      

      

      

        Submit
        Clear Values
      
    
  )
}

export default reduxForm({
  form: 'fieldLevelValidation' // a unique identifier for this form
})(FieldLevelValidationForm)

上述代碼中請(qǐng)注意如下幾點(diǎn)：
（1）組件中仍然需要注意component屬性的用法，還有自定義屬性selects的用法；
（2）因?yàn)樯厦娲a的核心是討論逐字段校驗(yàn)技術(shù)的，所以，仍然需要關(guān)注組件中validate屬性的表達(dá)方式；
（3）再需要關(guān)注的是組件中custom001等幾個(gè)屬性的用法（這里的表達(dá)毫無意義，只是概念探討）。然后，在上面的renderField這個(gè)無狀態(tài)函數(shù)（component屬性的用法之一，對(duì)不對(duì)？）相關(guān)代碼中，其參數(shù)使用了如下方式：
{ input, label, type, custom001,meta: { touched, error, warning } }
有關(guān)input和meta，官方網(wǎng)站已經(jīng)提供了細(xì)致的說明，label和type對(duì)應(yīng)于原始DOM標(biāo)記的有關(guān)屬性，而custom001則是上面代碼中定義組件時(shí)加入的一個(gè)定制屬性(prop），這里通過下面的簡(jiǎn)單的測(cè)試方式提供了這個(gè)定制prop在組件component屬性值（是一個(gè)無狀態(tài)函數(shù)）中的使用方法。

小結(jié)

在redux-form中，的位置舉足輕重，在本文相關(guān)的字段級(jí)校驗(yàn)用法中，難點(diǎn)在于對(duì)其component不同屬性值（根據(jù)上面說明，可能是組件，無狀態(tài)函數(shù)或者常規(guī)DOM字符串）的屬性的理解，還有對(duì)于validate這個(gè)屬性值表達(dá)方式的理解?？傮w感覺，一下徹底掌握redux-form也不是一件容易事?？傊?，如果選擇了React，那么你會(huì)在這個(gè)“泥沼”中“滯留”很長一段時(shí)間。

引文

1.https://redux-form.com/7.4.2/docs/api/field.md/
2.https://github.com/tedyuen/react-redux-form-v6-example#Field