redux-formV.7.4.2学习笔记--Field解析(完)-创新互联
说明
原本我想把整个redux-form中知识点与使用技巧通过这个小系列短文全面总结出来的,但是此过程中发现问题的确不少。但同时,在参考国内外一些相关资源的同时,又发现了一个比redux-form更值得研究的东西。先卖个关子(可能有少数朋友已经有所了解),稍过一些时间我会专门撰文介绍。因此,临时把本文作为此小系列的结束篇,敬请有志于学习redux-form有朋友原谅(当然,在你了解到我介绍的那个更好用的form wrapper后你更为有所体谅)。
成都创新互联公司:自2013年起为各行业开拓出企业自己的“网站建设”服务,为上千家公司企业提供了专业的网站设计、成都做网站、网页设计和网站推广服务, 按需网站建设由设计师亲自精心设计,设计的效果完全按照客户的要求,并适当的提出合理的建议,拥有的视觉效果,策划师分析客户的同行竞争对手,根据客户的实际情况给出合理的网站构架,制作客户同行业具有领先地位的。引言
redux-form官方网站提供了操作form的许多API,其中最重要的无外乎三个:reduxForm(config:Object) 、props和
本文专注于分析
的作用
使用三原则
在正确使用
(一)必须提供name属性
此属性值可以是简单的字符串,如 userName、password,也可以是使用点和中括号串联表达的代表路径含义的复杂的字符串结构,如 contact.billing.address[2].phones[1].areaCode。
(二)必须提供component属性
此属性值可以是一个React组件(Component)、无状态函数(stateless function)或者是DOM所支持的默认的标签(分别是input、textarea和select)元素。
(三)其他属性
能够传递给
- 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.”直译过来,好像是“其他所有属性会被传递给由component属性生成的元素”。但是,这种理解本人感觉十分不妥,又有同学Ted Yuen的翻译成“其他所有属性会通过prop传递到元素生成器中。如 className。”感觉也不是很恰当。还是让我们随着本文最后面复杂的示例讨论来确定如何理解这一句吧。
使用 的前提——导入API
var Field = require('redux-form').Field; // ES5
import { Field } from 'redux-form'; // ES6
component属性使用三情形
使用方式一:component={React组件}
这种情形下 ,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'
...
使用方式二:component={无状态函数}
这是使用
【切记】必须在render() 方法外部定义上述无状态函数;否则,它会随着每次渲染都会被重新创建,从而由于组件的 prop发生了变化而使得系统强制
// 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”
这种使用情况比较简单,比如创建一个文字输入框组件,你只需要使用如下方式:
<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许可证,提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案,具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势,专为企业上云打造定制,能够满足用户丰富、多元化的应用场景需求。
网页标题:redux-formV.7.4.2学习笔记--Field解析(完)-创新互联
文章位置:http://pwwzsj.com/article/ijecd.html