原本我想把整个redux-form中知识点与使用技巧通过这个小系列短文全面总结出来的，但是此过程中发现问题的确不少。但同时，在参考国内外一些相关资源的同时，又发现了一个比redux-form更值得研究的东西。先卖个关子（可能有少数朋友已经有所了解），稍过一些时间我会专门撰文介绍。因此，临时把本文作为此小系列的结束篇，敬请有志于学习redux-form有朋友原谅（当然，在你了解到我介绍的那个更好用的form wrapper后你更为有所体谅）。
redux-form官方网站提供了操作form的许多API，其中最重要的无外乎三个：reduxForm(config:Object) 、props和
本文专注于分析
在正确使用
此属性值可以是简单的字符串，如 userName、password，也可以是使用点和中括号串联表达的代表路径含义的复杂的字符串结构，如 contact.billing.address[2].phones[1].areaCode。
此属性值可以是一个React组件（Component）、无状态函数（stateless function）或者是DOM所支持的默认的标签（分别是input、textarea和select)元素。
能够传递给
官文原文中说法是“All other props will be passed along to the element generated by the component prop.”直译过来，好像是“其他所有属性会被传递给由component属性生成的元素”。但是，这种理解本人感觉十分不妥，又有同学Ted Yuen的翻译成“其他所有属性会通过prop传递到元素生成器中。如 className。”感觉也不是很恰当。还是让我们随着本文最后面复杂的示例讨论来确定如何理解这一句吧。
var Field = require('redux-form').Field; // ES5
import { Field } from 'redux-form'; // ES6
这种情形下 ，component属性值可以是任何自定义的组件或者从其他第三方库导入的React组件。定义组件的代码请参考：
重庆分公司
重庆分公司
// MyCustomInput.js
import React, { Component } from 'react'
class MyCustomInput extends Component {
render() {
const { input: { value, onChange } } = this.props
return (
The current value is {value}.
)
}
}然后在你的表单组件定义代码中便可以这样使用：
import MyCustomInput from './MyCustomInput'
...
这是使用
【切记】必须在render() 方法外部定义上述无状态函数；否则，它会随着每次渲染都会被重新创建，从而由于组件的 prop发生了变化而使得系统强制
// outside your render() method
const renderField = (field) => (
{field.meta.touched && field.meta.error &&
{field.meta.error}}
)
// inside your render() method
这种使用情况比较简单，比如创建一个文字输入框组件，你只需要使用如下方式：
<Field component="input" type="text"/>
易见，这种方式是把传统DOM元素用
说明：本例中的代码大部分来自于官方网站提供的redux-form-field-level-validation.js这个文件，也就是有关于在一个redux-form表单中进行按字段校验的情况。但是，有几句代码作了修改，有兴趣的同学请认真观察分析（为了便于参考，我把这个文件的修改版本的完整代码列举如下）：
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)}
{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}
{touched &&
((error && {error}) ||
(warning && {warning}))}
)
const FieldLevelValidationForm = (props) => {
const { handleSubmit, pristine, reset, submitting } = props
return (
)
}
export default reduxForm({
form: 'fieldLevelValidation' // a unique identifier for this form
})(FieldLevelValidationForm)上述代码中请注意如下几点：
（1）
（2）因为上面代码的核心是讨论逐字段校验技术的，所以，仍然需要关注
（3）再需要关注的是
{ input, label, type, custom001,meta: { touched, error, warning } }
有关input和meta，官方网站已经提供了细致的说明，label和type对应于原始DOM标记的有关属性，而custom001则是上面代码中定义
在redux-form中，
1.https://redux-form.com/7.4.2/docs/api/field.md/
2.https://github.com/tedyuen/react-redux-form-v6-example#Field
另外有需要云服务器可以了解下创新互联scvps.cn，海内外云服务器15元起步，三天无理由+7*72小时售后在线，公司持有idc许可证，提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案，具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势，专为企业上云打造定制，能够满足用户丰富、多元化的应用场景需求。
