使用redux-form时文本框无法输入的问题求助

嘿，别担心！新手遇到这种摸不着头脑的问题太正常啦，我帮你梳理几个大概率的排查方向，一步步来解决～

可能的原因及排查步骤 #

1. Redux Form的核心状态配置缺失
   首先要确认你的Redux Store里有没有正确注册redux-form的reducer——这是最容易被忽略的关键点！如果store没配置form reducer，组件根本没法和输入状态同步，自然就输不进内容。
   检查你的store配置文件，应该要有类似这样的代码：

   import { combineReducers } from 'redux';
   import { reducer as formReducer } from 'redux-form';
   
   const rootReducer = combineReducers({
     // 这里放你的其他自定义reducer
     form: formReducer // 必须加上这行！
   });
   

2. 自定义TextInput组件的props传递问题
   你用了自己写的TextInput作为Field的渲染组件，一定要确保它正确接收并传递了redux-form的input props。比如正确的写法应该是：

   const TextInput = ({ input, label, meta: { touched, error } }) => (
     <div>
       <label>{label}</label>
       {/* 把input里的value、onChange等核心props都传给原生input */}
       <input {...input} type="text" />
       {touched && error && <span className="error">{error}</span>}
     </div>
   );
   

   如果你的TextInput没把这些关键props传递下去，输入的内容就没法同步到Redux状态里，看起来就是“输入没反应”。

3. Webpack配置的隐性问题
   既然没用create-react-app，webpack的loader配置可能有疏漏。虽然这种情况一般会直接报错，但也有可能导致组件逻辑异常：

   • 检查有没有安装@babel/preset-react和@babel/preset-env，并在babel配置文件里启用它们；
   • 确认webpack的module规则里，对.js/.jsx文件正确使用了babel-loader来编译。

4. 快速验证小技巧
   先把自定义的TextInput换成原生input组件测试：

   <Field name="testField" component="input" type="text" />
   

   如果这样能正常输入，那问题肯定出在你的TextInput组件上；如果还是不行，就回到第一步检查Redux Store的配置。

内容的提问来源于stack exchange，提问作者Павел Ефименко