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>
<button type="button" onClick={() => onChange(value - 1)}>Dec</button>
</div>
)
}
}
然后在你的表单组件定义代码中这样使用:

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解析

原文：http://blog.51cto.com/zhuxianzhong/2151129