前端UI组件【免费下载链接】redux-formA Higher Order Component using react-redux to keep form state in a Redux store项目地址https://gitcode.com/gh_mirrors/re/redux-form点击查看免费下载Fields是 redux-form 中与Field平级的核心组件它允许你在一个连接组件内同时操作多个表单字段将数组形式的names批量绑定到 Redux store 中的表单状态并按字段结构向渲染组件分发input与meta对象。本文将以 docs/api/Fields.md 为主体结合仓库源码src/createFields.js、src/ConnectedFields.js、src/createFieldProps.js与测试用例src/tests/Fields.spec.js完整讲解Fields的全部 props、实例 API、Props 结构、性能注意事项及底层实现原理帮助你正确选型与使用这一组件。Fields是什么与Field的关系与差异Fields组件与Field非常相似核心区别在于连接方式Field通过单个nameprop 连接一个字段Fields通过namesprop字符串数组连接多个字段只产生一个与 Redux store 连接的高阶组件实例。重要性能提示连接多个字段应谨慎使用因为每当它所连接的任意一个字段发生变化时整个Fields组件都会重新渲染这可能成为性能瓶颈。除非确实需要否则建议使用Field单独连接各个字段。这一告诫在文档中被明确标注是使用Fields前必须权衡的核心原则。引入方式Fields从redux-form包中导出支持 CommonJS 与 ES Module 两种语法var Fields require(redux-form).Fields // ES5import { Fields } from redux-form // ES6在仓库内部Fields的默认导出由 src/Fields.js 通过createFields(plain)基于普通 JS 对象结构生成而 src/immutable/Fields.js 则用createFields(immutable)生成 Immutable.js 版本两个入口共用同一套工厂逻辑。可传给Fields的 Props 详解names : ArrayString必填由字符串或FieldArray提供的伪数组fields组成的数组使用点号与方括号记法对应表单值。既可以简单如firstName也可以复杂如contact.billing.address[2].phones[1].areaCode支持任意深度的嵌套结构与数组索引。源码中validateNamePropsrc/createFields.js对names做了强校验缺失时报错No names prop was specified Fields/既不是数组也不是FieldArray的fields通过_isFieldArray标记判断时报错Invalid prop names。对应测试用例src/tests/Fields.spec.js验证了这两种错误场景。component : Component|Function必填一个组件类或无状态函数用于接收渲染字段输入所需的全部 props具体结构见下文 Props 章节。源码通过validateComponentPropsrc/util/validateComponentProp.js校验其合法性测试同样覆盖了传入非组件对象时报Element type is invalid的场景。format : (value, name) formattedValue可选将 Redux store 中的值格式化为输入框中显示的值。常见用途包括把Number格式化为货币、把Date格式化为本地化日期。format以字段value和name为参数返回要显示的新格式化值。为了兼容 React 15 的输入行为内部默认使用defaultFormat value value null ? : value如果希望禁用该默认行为可将format显式传为null。这一逻辑在 src/createFieldProps.js 的formatFieldValue中实现format null时原样返回 value否则执行format(value, name)。props : object可选包含自定义 props 的对象会被透传到component组件中并与Fields自身提供的 props 合并。该属性完全是可选的传递自定义 props 的首选方式仍是直接写在Fields组件上仅当出于 TypeScript 等场景偏好把 props 打包成独立对象时才使用props传递。在 src/createFieldProps.js 中custom: { ...custom, ...props }即实现了二者合并并在渲染时以{ ...props, ...custom }src/ConnectedFields.js展开。parse : (value, name) parsedValue可选将输入组件给出的值解析为要存入 Redux store 的类型。常见用途包括把货币字符串解析回Number、把本地化日期字符串解析回Date与format正好互为逆向过程。parse同样以字段value和name为参数返回要存储的新解析值。在 src/ConnectedFields.js 中parse参与handleChange与handleBlur的事件处理事件值经onChangeValue(event, { name, parse })src/events/onChangeValue.js解析后再 dispatch 对应的change/bluraction。validate : (value, allValues, props, name) error可选提供字段级校验规则。函数入参依次为字段当前值、表单所有其他值、传给表单的 props、当前正在校验的字段名。字段有效时返回undefined无效时返回错误信息通常是但不限于String。注意若validateprop 发生变化字段会被重新注册。validate可以是三种形态单个函数函数数组依次执行全部校验规则对象此时对象的键对应names数组中的元素值为校验函数详见下文 在validate与warn中传对象 一节。warn : (value, allValues, props) warning可选提供字段级警告规则签名与validate基本一致。无需警告时返回undefined需要警告时返回警告信息通常是但不限于String。注意若warnprop 发生变化字段也会被重新注册。与validate相同warn也可以是函数、函数数组或对象对象键对应names中的元素。forwardRef : boolean可选若为true渲染出的组件实例可通过getRenderedComponent()方法获取。默认false。当你的 component 是无状态函数组件时不能使用因为无状态函数组件没有可引用的实例。Fields的 props 类型定义可在 src/FieldsProps.types.js.flow 中查看其中WarnAndValidateProp类型明确允许Validator | Validator[] | { [string]: (Validator | Validator[]) }三种形态src/createFields.js 也以 PropTypes 形式声明了相同约束。Usage 用法示例componentprop 会被传给React.createElement()它接受两种可能的值方式一传入组件类可以是自己编写的任何组件类或从第三方库导入的组件。它会收到下文 Props 一节描述的全部 props。方式二传入无状态函数这是使用Fields最灵活的方式因为它对输入如何渲染拥有完全控制权尤其适合展示校验错误对从旧版 redux-form 迁移过来的开发者也是最熟悉的写法。关键约束必须把无状态函数定义在render()方法外部否则该函数会在每次渲染时被重新创建导致componentprop 引用变化而强制Fields重新渲染——不仅更慢而且每次整个表单组件重渲染时输入框会丢失焦点。// outside your render() method const renderFields (fields) ( div div classNameinput-row input {...fields.firstName.input} typetext/ {fields.firstName.meta.touched fields.firstName.meta.error span classNameerror{fields.firstName.meta.error}/span} /div div classNameinput-row input {...fields.lastName.input} typetext/ {fields.lastName.meta.touched fields.lastName.meta.error span classNameerror{fields.lastName.meta.error}/span} /div /div ) // inside your render() method Fields names{[ firstName, lastName ]} component{renderFields}/在validate与warnprop 中传对象validate与warn支持对象形态对象的键是names数组中的元素值是对应字段的校验/警告函数Fields names{[foo, bar]} component{input} validate{{ foo: (value, allValues, props, name) error }} warn{{ foo: (value, allValues, props) warning }} /在源码层面src/createFields.js 的getFieldWarnAndValidate决定如何提取某个具体字段的校验/警告函数若validate/warn是数组或函数则整体使用若是对象则通过get(prop, name, undefined)按字段名取出对应的那一个函数再连同字段名一起注册进表单状态。实例 APIFields组件实例上可用以下属性与方法注意文档标题中表述为 Field component实为Fields实例的 APIdirty : boolean若任意字段的当前值与其初始化值不同则为true否则为false。源码实现为this.connected.current.isDirty()src/createFields.js底层在 src/ConnectedFields.js 中通过Object.keys(_fields).some(name _fields[name].dirty)判断。names : ArrayString当嵌套在FormSection中时返回以FormSection名称作前缀的names否则返回传入namesprop 的副本。前缀逻辑由 src/util/prefixName.js 的formatName实现sectionPrefix ? ${sectionPrefix}.${name} : name。pristine : boolean若所有字段的当前值都与初始化值相同则为true否则为false。实现即!this.dirtysrc/createFields.js。values : any各字段的当前值若字段是嵌套的值会还原成对应的嵌套结构。例如names为[name.first, name.last, email]时values为{ name: { first: John, last: Smith }, email: johnemail.com }。底层由 src/ConnectedFields.js 的getValues()实现用plain.setIn(accumulator, name, _fields[name].value)逐个还原嵌套路径。getRenderedComponent()返回渲染后组件的实例。使用前提必须提供forwardRefprop且 component 不能是无状态函数组件。源码在 src/createFields.js 中用invariant强制校验forwardRef缺失时抛出错误提示随后转发到ConnectedFields的getRenderedComponent()src/ConnectedFields.js返回this.ref.current。Props传给渲染组件的 props 结构Fields传给渲染组件的 props 与Field生成的input与meta结构相同区别在于它们按你传入的names结构拆分重组。传给Field的任何额外 props 都会包含在最终 props 结构的根层级。例如字段定义为Fields names{[ name, email, address.street, address.city, address.postalCode ]} component{MyMultiFieldComponent} anotherCustomPropSome other information /则传给组件的 props 结构为{ name: { input: { ... }, meta: { ... } }, email: { input: { ... }, meta: { ... } }, address: { street: { input: { ... }, meta: { ... } }, city: { input: { ... }, meta: { ... } }, postalCode: { input: { ... }, meta: { ... } } }, anotherCustomProp: Some other information }在 src/ConnectedFields.js 的render()中这一结构通过Object.keys(_fields).reduce(...)逐字段调用createFieldProps生成input/meta再用plain.setIn(accumulator, fieldName, fieldProps)按点路径还原嵌套结构若存在sectionPrefix还会先去掉前缀name.replace(${sectionPrefix}., )保证FormSection场景下渲染组件拿到的是相对名称。每个字段的input与meta细节如error优先级为syncError || asyncError || submitError、invalid: !!error、touched、visited、autofilled等均由 src/createFieldProps.js 统一生成。底层实现注册、事件分发与状态映射Fields是薄壳组件真正的 Redux 连接由ConnectedFields完成src/ConnectedFields.js其connect的mapStateToProps为每个names中的字段从表单状态中提取value、initial、syncError、syncWarning、asyncError、submitError、submitting、pristine/dirty等快照同步错误的提取还做了兼容处理src/ConnectedFields.js可能从${name}._error解包嵌套结构的错误也可能直接取该路径的完整错误/警告对象。组件生命周期围绕注册/注销展开挂载时componentDidMountsrc/createFields.js对每个names调用register以Field类型注册并把按字段名提取的validate/warn函数一并注册names变化时UNSAFE_componentWillReceivePropssrc/createFields.js先unregister旧的每个 name再registerFields新的 names卸载时componentWillUnmountsrc/createFields.js注销全部字段。事件处理handleChange/handleFocus/handleBlursrc/ConnectedFields.js对每个字段缓存独立的 handler变更/失焦时用parse解析值后 dispatchchange/bluraction若配置了asyncValidate还会触发异步校验回调同时通过shouldComponentUpdate的deepEqual比较src/ConnectedFields.js尽量避免无谓重渲染。测试套件src/tests/Fields.spec.js共 1888 行覆盖了状态取值、dirty/pristine/names/valuesgetter、同步与异步错误、submit 错误、FormSection前缀等全部行为可作为深入研读的权威依据。何时使用Fields选型建议综合文档告诫与源码结构可得出以下使用建议多个字段需要作为一个整体联动渲染如格式化地址、日期区间、账单信息等彼此关联的字段组时Fields能减少连接组件的数量并保持渲染结构内聚非联动场景优先用Field任何字段独立变化都会导致整个Fields重渲染字段数量越多、变化越频繁性能影响越明显需要批量展示校验错误时配合无状态函数渲染meta.error务必把函数定义在render()外避免失焦问题是最灵活的用法需要访问字段组整体状态dirty/pristine/values时可直接通过 ref 读取实例 API。更复杂的数组型多字段场景可参考FieldArray文档单字段的精细化控制则参考Field文档。二者与Fields共同构成了 redux-form 字段绑定的完整工具集。赞分享前端UI组件【免费下载链接】redux-formA Higher Order Component using react-redux to keep form state in a Redux store项目地址https://gitcode.com/gh_mirrors/re/redux-form点击查看免费下载相关推荐Ant Design Form 全局状态管理用 fields 与 onFieldsChange 将表单数据存入上层组件或 ReduxAnt Design Form 全局状态管理用 fields 与 onFieldsChange 将表单数据存入上层组件或 Redux 导读 Ant Desig前端UI组件设计系统Solid Form 字段联动校验用 onChangeListenTo / onBlurListenTo 连接两个表单字段Solid Form 字段联动校验用 onChangeListenTo / onBlurListenTo 连接两个表单字段 本文导读 在使用 TanStac前端UI组件pm-skills 多视角头脑风暴命令 /brainstorm 完全指南为现有与新产品系统化生成创意与实验设计pm skills 多视角头脑风暴命令 /brainstorm 完全指南为现有与新产品系统化生成创意与实验设计 /brainstorm 是 pm skills前端UI组件创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考