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

<Field/>的作用

所有需要與Redux store 數據連接的表單中的輸入組件，都可以用 <Field/>實現。

<Field/>使用三原則

但是，在正確使用它之前，你需要牢記下面三條基本原則：

（一）必須提供name屬性

此屬性值可以是簡單的字符串，如 userName、password，也可以是使用點和中括號表達的代表路徑含義的復雜的字符串結構，如 contact.billing.address[2].phones[1].areaCode。

（二）必須提供component屬性

此屬性值可以是一個React組件（Component）、無狀態函數（stateless function）或者是DOM所支持的默認的標簽（它們是input、textarea和select)。

（三）其他所有屬性會通過prop傳遞到元素生成器中，如 className。

導入API

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

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

<Field/>組件的component屬性使用情形

1.情形一：component={React組件}

這種情形下 ，component屬性值可以是任何自定義的組件或者從其他第三方庫導入的React組件。

// 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>

import MyCustomInput from ‘./MyCustomInput‘

...

<Field name="myField" component={MyCustomInput}/>
2.情形二：component={無狀態函數}

這是使用 <Field/> 的最靈活的方法，因為使用這種方法可以使你完全控制表單輸入組件的渲染方式。而且，這種方式對於顯示校驗錯誤信息特別有用。當然，這種使用思路對於從以前版本的 redux-form使用轉移過來的程序員來說是十分熟悉的。

【切記】必須在render() 方法外部定義上述無狀態函數；否則，它會隨著每次渲染都會被重新創建，從而由於組件的 prop發生了變化而使得系統強制 <Field/> 重新渲染。如果你在 render() 方法內部定義無狀態函數，這不但會拖慢你的app，而且input組件每次都會在組件重新渲染的時候失去焦點。

// 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}/>
3.情形三：component=“input”或者component=“select”或者component=“textarea”

比如創建一個文字輸入框組件，你只需要使用如下方式：

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

（未完待續......）

redux-form V.7.4.2學習筆記（七）Field解析