redux-form中`meta: { touched, error }`存储位置及作用域外访问问询

嘿，我来帮你理清楚这两个redux-form的问题哈！

• 存储位置：这些meta相关状态（比如touched标记字段是否被触碰过，error存储字段的验证错误信息），是由redux-form统一托管在Redux Store中的。具体路径是state.form[你的表单唯一名称].fields[对应字段名].meta。举个例子，如果你的表单叫loginForm，字段是username，那对应的touched和error就存在state.form.loginForm.fields.username.meta这个对象里。
• 外部访问性：当然可以在renderField函数的作用域之外访问！你有两种常用方式：
  • 借助redux-form提供的官方选择器（比如getFieldMeta、getFormMeta），结合React-Redux的connect高阶组件，把这些meta数据映射到组件的props中使用。
  • 直接通过connect从Redux Store的对应路径手动选取数据，不过这种方式不如官方选择器省心，因为官方选择器已经帮你处理了表单名称、字段名的关联逻辑，不容易出错。

你已经写好了通用的字段渲染函数renderField，接下来只需要把它和redux-form的核心组件、高阶组件结合，就能完成完整的表单功能，具体步骤如下：

1. 在表单中用<Field>组件挂载renderField
   在组件的render()方法里的<form>标签内，使用redux-form提供的<Field>组件来定义每个输入字段，把renderField作为component属性传入，同时配置字段的name（这个是redux-form关联store数据的关键）、placeholder、type等属性：

   render() {
     // 从redux-form注入的props中获取handleSubmit方法
     const { handleSubmit } = this.props;
     return (
       <form onSubmit={handleSubmit(this.handleFormSubmit)}>
         {/* 示例：渲染邮箱输入框 */}
         <Field
           name="email"
           type="email"
           placeholder="请输入你的邮箱"
           className="input-style"
           component={renderField}
         />
         {/* 示例：渲染密码输入框 */}
         <Field
           name="password"
           type="password"
           placeholder="请输入你的密码"
           className="input-style"
           component={renderField}
         />
         <button type="submit">提交表单</button>
       </form>
     );
   }
   

2. 用reduxForm高阶组件包装表单组件
   导入reduxForm，并把你的表单组件包裹起来，配置表单的唯一名称（form属性），如果需要自定义字段验证规则，还可以传入validate函数：

   import { reduxForm, Field } from 'redux-form';
   
   // 自定义验证函数示例：检查字段是否为空、格式是否正确
   const validateForm = values => {
     const errors = {};
     if (!values.email) {
       errors.email = '邮箱不能为空';
     } else if (!/^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,}$/i.test(values.email)) {
       errors.email = '请输入正确的邮箱格式';
     }
     if (!values.password) {
       errors.password = '密码不能为空';
     } else if (values.password.length < 6) {
       errors.password = '密码长度不能少于6位';
     }
     return errors;
   };
   
   class MyLoginForm extends React.Component {
     // 表单提交后的处理逻辑
     handleFormSubmit = formValues => {
       // 这里可以写提交API、跳转页面等逻辑
       console.log('提交的表单数据：', formValues);
     };
   
     render() {
       // ... 上面的render代码
     }
   }
   
   // 用reduxForm包装组件，传入配置项
   export default reduxForm({
     form: 'loginForm', // 表单的唯一标识，不能和其他redux-form表单重复
     validate: validateForm // 传入自定义验证函数
   })(MyLoginForm);
   

3. 确保Redux Store集成了redux-form的reducer
   最后别忘了在创建Redux Store的时候，把redux-form的formReducer添加到根reducer中，否则redux-form无法正常管理表单状态：

   import { createStore, combineReducers } from 'redux';
   import { reducer as formReducer } from 'redux-form';
   
   // 合并你的其他reducer和formReducer
   const rootReducer = combineReducers({
     // 这里放你的其他业务reducer，比如user: userReducer
     form: formReducer // 必须添加这一行，redux-form依赖它来管理状态
   });
   
   // 创建Store
   const store = createStore(rootReducer);
   

内容的提问来源于stack exchange，提问作者WouldBeNerd