React-redux-form可编辑输入框问题：value只读/defaultValue为空

嘿，我之前用React Redux Form的时候也踩过这个一模一样的坑！直接用原生的value或者defaultValue确实会出问题，因为这个库有自己的表单状态管理逻辑，咱们换个正确的姿势来解决：

核心问题原因 #

• 用value={existingItem.name}时，输入框变成了受控组件，但你没把它和Redux Form的状态绑定，用户输入时没有对应的逻辑更新这个值，所以看起来就像只读一样。
• 用原生defaultValue的话，Redux Form会完全接管表单的状态管理，原生的默认值会被覆盖，导致输入框显示为空。

正确的解决方案 #

React Redux Form提供了Field组件和reduxForm高阶组件来处理表单绑定和初始值设置，咱们分两种场景来实现：

1. 基础场景：初始值已知时

用reduxForm的initialValues配置项传入你的existingItem.name，同时用Field组件渲染输入框：

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

const EditItemForm = ({ handleSubmit }) => {
  return (
    <form onSubmit={handleSubmit}>
      {/* 用Field组件绑定输入框，name对应表单状态的字段名 */}
      <Field
        name="itemName"
        component="input"
        type="text"
        placeholder="编辑物品名称"
      />
      <button type="submit">保存修改</button>
    </form>
  );
};

// 用reduxForm包裹组件，设置表单标识和初始值
export default reduxForm({
  form: 'editItemForm', // 给表单一个唯一的名字
  initialValues: (props) => ({
    itemName: props.existingItem.name // 从props获取初始值
  })
})(EditItemForm);

2. 动态场景：初始值异步获取（比如从API加载）

如果你的existingItem是后续才拿到的（比如接口请求返回），可以用initialize action来动态初始化表单：

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

const EditItemForm = ({ handleSubmit, existingItem }) => {
  const dispatch = useDispatch();

  useEffect(() => {
    // 当existingItem加载完成后，初始化表单
    if (existingItem?.name) {
      dispatch(initialize('editItemForm', { itemName: existingItem.name }));
    }
  }, [existingItem, dispatch]);

  return (
    <form onSubmit={handleSubmit}>
      <Field
        name="itemName"
        component="input"
        type="text"
        placeholder="编辑物品名称"
      />
      <button type="submit">保存修改</button>
    </form>
  );
};

export default reduxForm({
  form: 'editItemForm'
})(EditItemForm);

这样设置后，输入框会正确显示existingItem.name的初始值，同时完全支持编辑，提交时也能拿到更新后的值~

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