React Redux Form常见问题解答解决表单开发中的痛点【免费下载链接】react-redux-formCreate forms easily in React with Redux.项目地址: https://gitcode.com/gh_mirrors/re/react-redux-formReact Redux Form是一个帮助开发者在React应用中轻松创建表单的库它结合了Redux的状态管理能力让表单处理变得更加简单高效。本文将解答React Redux Form使用过程中的常见问题帮助开发者快速解决表单开发中的痛点。如何将react-redux-form创建的reducer与其他reducers结合使用使用combineReducers将react-redux-form的reducer与其他reducers一起组合并通过combineForms的第二个参数设置reducer的键名。例如const store createStore(combineReducers({ nav: navReducer, foo: fooReducer, bar: barReducer, deep: combineForms({ user: initialUserState, goat: initialGoatState, }, deep), }));详细信息可参考combineForms文档。如何根据字段状态添加条件类名在Control组件上使用mapProps属性根据字段状态设置控件组件的任何属性。例如Control.text modeluser.firstName mapProps{{ className: ({fieldValue}) fieldValue.focus ? focused : }} /mapProps映射中函数值提供的属性包括modelValue、fieldValue、onFocus、onBlur、onChange等。如何实现跨字段验证跨字段验证是更高层次的表单级问题遵循Redux的树形数据流程模式。如果需要验证一组可重用的字段可以嵌套表单但需将表单的component属性设置为非form的值因为HTML中不能嵌套表单。例如import { Form, Control } from react-redux-form; const isOver18 (day, month, year) { ... }; const BirthDate ({forModel}) ( Form model{${forModel}.birth} componentdiv validators{{ : ({day, month, year}) isOver18(day, month, year), }} Control model.day placeholderDay / Control model.month placeholderMonth / Control model.year placeholderYear / /Form ); export default BirthDate;更多信息请参见验证指南。如何获取组件实例ref{...}似乎不起作用使用getRef{(node) ...}代替ref。这是因为React将ref属性视为“魔术”属性不会通过包装组件向下传播。你可以在Field、Control、Form或LocalForm组件上使用getRef自版本1.3.2起。例如Control.text modeluser.name getRef{(node) this.attach(node)} /如何设置单值/多值复选框对于表示模型布尔值true或false的单个复选框可以按预期使用Control.checkbox// 如果选中user.hasPets true否则为false。 Control.checkbox modeluser.hasPets /对于表示模型多个可能值的多个复选框在控件上附加[]以指示它是多值模型// 如果选中dog和cat模型将为user.pets [dog, cat] Control.checkbox modeluser.pets[] valuedog / Control.checkbox modeluser.pets[] valuecat / Control.checkbox modeluser.pets[] valuegoat /对于表示对象模型中布尔键值的单个或多个复选框使用标准点表示法// 如果选中dog和cat模型将为user.pets { dog: true, cat: true, goat: false } Control.checkbox modeluser.pets.dog / Control.checkbox modeluser.pets.cat / Control.checkbox modeluser.pets.goat /如何创建文件上传表单Form onSubmit{(values, event) ...}属性的第二个参数提供表单提交时发出的事件。改编自MDN文档的示例class UploadForm extends Component { onSubmit (values, event) { const formData new FormData(event.target); const request new XMLHttpRequest(); request.open(POST, /upload, true); request.onload function(oEvent) { if (request.status 200) { console.log(Uploaded!); } else { console.log(Error uploading.); } }; request.send(formData); event.preventDefault(); } render() { return ( Form modeluser encTypemultipart/form-data onSubmit{this.onSubmit} Control.file model.avatar / buttonUpload!/button /Form ); }; }如何使用其他类型的HTML5输入如email和password只需将typeemail或typepassword等类型作为prop传递给ControlControl typeemail / Control typepassword / // 也可以这样 Control.text typeemail / Control.text typepassword /使用这些类型将获得原生HTML5约束验证就像使用input typeemail一样。如何隐藏原生HTML5验证消息同时仍防止表单在无效时提交自版本0.14.0起可以使用hideNativeErrors属性指示不希望显示原生HTML5约束验证消息。这仍将保留如果控件由于HTML5验证而无效表单将无法提交的行为// 不会显示原生错误 // Errors /将按预期在触摸或单击提交按钮时显示 Form modeluser hideNativeErrors Control.text model.email typeemail / Errors model.email messages{{ valueMissing: Hey, where is your email?, typeMismatch: Not a valid email! }} showtouched / buttonSubmit!/button /Form如果要防止在单个控件上显示HTML5验证消息可以使用原生onInvalid处理程序阻止显示原生HTML5验证消息Control.text modeluser.email typeemail onInvalid{e e.preventDefault()} /使用部分模型时如何获取完全解析的模型字符串你始终可以通过mapProps从特定于Control的props中获取完全解析的模型字符串Control.text model.firstName mapProps{{ model: ({ model }) model }} / // model将是完全解析的模型例如user.firstName这对于需要完全解析的模型字符串的自定义组件例如包装在标签中的复选框特别有用。通过以上常见问题的解答相信你在使用React Redux Form开发表单时能够更加得心应手轻松解决遇到的各种问题。如果还有其他疑问可以查阅项目的官方文档或在社区中寻求帮助。要开始使用React Redux Form你可以通过以下命令克隆仓库git clone https://gitcode.com/gh_mirrors/re/react-redux-form。【免费下载链接】react-redux-formCreate forms easily in React with Redux.项目地址: https://gitcode.com/gh_mirrors/re/react-redux-form创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考