如何用redux-form实现受控输入？<Field>组件提交值不更新排查

嗨，我来帮你理清这个问题的根源，再给你具体的实现方案：

为什么用<Field>时提交后值没变化，换成原生<input>就正常？ #

核心问题出在redux-form的<Field>是完全由Redux Store管控的受控组件，和你直接用原生<input>绑定组件state的逻辑完全不是一回事：

• 当你用原生<input>时，应该是把它的value绑定到了组件自己的state里，提交时直接修改这个state，输入框就会跟着更新——这是组件内部状态管理的逻辑。
• 但<Field>组件的输入值是存在Redux Store里的，它的更新完全依赖Redux的action和reducer。如果你还像操作原生input那样去改组件内部state，根本碰不到Redux Store里的字段值，输入框自然不会有变化。

如何用redux-form实现受控输入，还能完成「提交后值翻倍」的需求？ #

下面是完整的实现步骤和示例代码，照着来就行：

1. 先创建被redux-form包装的表单组件 #

你需要用reduxForm()高阶组件把你的表单和Redux Store关联起来：

import React from 'react';
import { Field, reduxForm } from 'redux-form';

// 自定义输入组件（Field会自动把所需props传进来）
const NumberInput = ({ input, label, meta: { touched, error } }) => (
  <div>
    <label>{label}</label>
    <input {...input} type="number" />
    {touched && error && <span className="error">{error}</span>}
  </div>
);

let DoubleNumberForm = (props) => {
  // 从props解构redux-form提供的方法和数据
  const { handleSubmit, change, values } = props;

  // 自定义提交逻辑：拿到当前值，翻倍后更新表单
  const handleDoubleSubmit = () => {
    const currentNum = values.number || 0;
    const doubledNum = currentNum * 2;
    // 必须用redux-form的change方法更新Store里的字段值
    change('number', doubledNum);
  };

  return (
    <form onSubmit={handleSubmit(handleDoubleSubmit)}>
      {/* Field组件通过name和Store里的字段关联 */}
      <Field name="number" component={NumberInput} label="输入数字" />
      <button type="submit">提交并翻倍</button>
    </form>
  );
};

// 用reduxForm高阶组件包装，指定唯一的表单名
DoubleNumberForm = reduxForm({
  form: 'doubleNumberForm' // 这个名字要唯一，用来区分不同表单
})(DoubleNumberForm);

export default DoubleNumberForm;

2. 关键细节要记牢 #

• <Field>的受控逻辑：<Field>会自动从Redux Store读取对应name的字段值，还会通过input.onChange把用户输入同步到Store——你不用手动写value和onChange绑定，redux-form都帮你搞定了。
• 更新字段的正确姿势：要改<Field>的显示值，绝对不能直接改组件state，必须用redux-form提供的change方法（从props里拿），它会触发action去更新Redux Store里的数据，这样<Field>才会同步显示新值。
• handleSubmit的作用：这是redux-form给的提交处理器，它会先帮你做表单验证（如果配置了规则的话），然后把表单的values传给你的自定义提交函数。

3. 别忘了配置Redux Store #

要让redux-form正常工作，必须把它的reducer加到你的根reducer里：

import { createStore, combineReducers } from 'redux';
import { reducer as formReducer } from 'redux-form';

// 组合所有reducer
const rootReducer = combineReducers({
  // 把form reducer加进来，名字必须是form
  form: formReducer
});

// 创建Store
const store = createStore(rootReducer);

这样操作后，用户输入数字点击提交，输入框的值就会自动变成原来的两倍啦！

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