redux-formV.7.4.2學(xué)習(xí)筆記--Field解析（完）

說明

原本我想把整個(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和 <Field/>。

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

<Field/>的作用

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

<Field/>使用三原則

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

（一）必須提供name屬性

此屬性值可以是簡單的字符串，如 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)元素。

（三）其他屬性

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

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。”感覺也不是很恰當(dāng)。還是讓我們隨著本文最后面復(fù)雜的示例討論來確定如何理解這一句吧。

使用<Field/>的前提——導(dǎo)入API

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

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

component屬性使用三情形

<Field/>組件的屬性中，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 (
      <div>
        <span>The current value is {value}.</span>
        <button type="button" onClick={() => onChange(value + 1)}>Inc</button>
        <button type="button" onClick={() => onChange(value - 1)}>Dec</button>
      </div>
    )
  }
}

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

import MyCustomInput from './MyCustomInput'

...

<Field name="myField" component={MyCustomInput}/>

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

這是使用 <Field/> 的最靈活的方法，因?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)制 <Field/> 重新渲染。如果你在 render() 方法內(nèi)部定義無狀態(tài)函數(shù)，這不但會(huì)拖慢你的app，而且input組件每次都會(huì)在組件重新渲染的時(shí)候失去焦點(diǎn)。

// outside your render() method
const renderField = (field) => (
    <div className="input-row">
      <input {...field.input} type="text"/>
      {field.meta.touched && field.meta.error &&
       <span className="error">{field.meta.error}</span>}
    </div>
  )

// inside your render() method
<Field name="myField" component={renderField}/>

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

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

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

易見，這種方式是把傳統(tǒng)DOM元素用<Field/>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 } }) => (
  <div>
      <div>
          <span>input</span>
          <pre>{JSON.stringify(custom001)}</pre>
      </div>
    <label>{label}</label>
    <div>
      <input {...input} placeholder={label} type={type}/>
      {touched && ((error && <span>{error}</span>) || (warning && <span>{warning}</span>))}
    </div>
  </div>
)
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 }
                     }) => (
    <div>
        <div>
            <span>{label}</span>
            <select {...input}>
                {
                    selects.map((item, i) => (
                        <option key={i} value={item.value}>{item.text}</option>
                    ))
                }
            </select>
        </div>
        {touched &&
        ((error && <div>{error}</div>) ||
            (warning && <div>{warning}</div>))}
    </div>
)
const FieldLevelValidationForm = (props) => {
  const { handleSubmit, pristine, reset, submitting } = props
  return (
    <form onSubmit={handleSubmit}>
      <Field name="username" type="text" custom001="custom00001" custom002="custom00002"
        component={renderField} label="Username"
        validate={[ required, maxLength25 ]}
      />
      <Field name="email" type="email" custom03="custom00003" custom04="custom00004"
        component={renderField} label="Email"
        validate={email}
        warn={aol}
      />
      <Field name="age" type="number"
        component={renderField} label="Age"
        validate={[ required, number, minValue18 ]}
        warn={tooOld}
      />

      <Field validate={[required]} component={selectField} selects={selects} label="Favorite Color" name="favoriteColor"/>

      <div>
        <button type="submit" disabled={submitting}>Submit</button>
        <button type="button" disabled={pristine || submitting} onClick={reset}>Clear Values</button>
      </div>
    </form>
  )
}

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

上述代碼中請(qǐng)注意如下幾點(diǎn)：
（1）<Field/>組件中仍然需要注意component屬性的用法，還有自定義屬性selects的用法；
（2）因?yàn)樯厦娲a的核心是討論逐字段校驗(yàn)技術(shù)的，所以，仍然需要關(guān)注<Field/>組件中validate屬性的表達(dá)方式；
（3）再需要關(guān)注的是<Field/>組件中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則是上面代碼中定義<Field/>組件時(shí)加入的一個(gè)定制屬性(prop），這里通過下面的簡單的測(cè)試方式提供了這個(gè)定制prop在<Field/>組件component屬性值（是一個(gè)無狀態(tài)函數(shù)）中的使用方法。

小結(jié)

在redux-form中，<Field/>的位置舉足輕重，在本文相關(guān)的字段級(jí)校驗(yàn)用法中，難點(diǎn)在于對(duì)其component不同屬性值（根據(jù)上面說明，可能是組件，無狀態(tài)函數(shù)或者常規(guī)DOM字符串）的屬性的理解，還有對(duì)于validate這個(gè)屬性值表達(dá)方式的理解。總體感覺，一下徹底掌握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

網(wǎng)站標(biāo)題：redux-formV.7.4.2學(xué)習(xí)筆記--Field解析（完）
URL地址：http://vcdvsql.cn/article4/jhepoe.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站策劃、商城網(wǎng)站、、服務(wù)器托管、外貿(mào)建站、品牌網(wǎng)站建設(shè)

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容

bl双性强迫侵犯h_国产在线观看人成激情视频_蜜芽188_被诱拐的少孩全彩啪啪漫画