React模态框表单数字属性无法填充defaultValue的问题

核心原因分析 #

你遇到的问题大概率和非受控组件的defaultValue仅在初始渲染生效有关——如果模态框是复用的（比如同一个组件实例切换编辑不同对象），当你打开新对象的编辑框时，defaultValue不会自动更新；另外数字类型的0在非受控场景下可能被误判，但更关键的是非受控组件的更新机制限制。

最优解决方案：改用受控组件 #

放弃依赖defaultValue，改用受控组件（通过value和onChange绑定表单state）是最可靠的方案，完全不需要把数字转成字符串存在state里：

1. 初始化表单state：打开编辑模态框时，直接把选中对象的属性赋值给表单state，数字属性保持原类型
2. 绑定输入框的value和onChange：处理输入时把字符串转成数字，空值根据业务需求设为null或0

示例代码：

// 组件内的状态
const [isModalOpen, setIsModalOpen] = useState(false);
const [formData, setFormData] = useState({});
const [selectedShip, setSelectedShip] = useState(null);

// 打开编辑模态框的函数
const handleEdit = (ship) => {
  setSelectedShip(ship);
  // 直接赋值原属性，数字保持number类型
  setFormData({
    name: ship.name,
    maxSpeed: ship.maxSpeed, // 数字属性
    capacity: ship.capacity, // 数字属性
    description: ship.description
  });
  setIsModalOpen(true);
};

// 数字输入框的写法
<input
  type="number"
  // 处理null/undefined的情况，避免显示0或NaN
  value={formData.maxSpeed ?? ''}
  onChange={(e) => {
    // 输入为空时设为null（或0，根据你的业务规则）
    const newValue = e.target.value ? Number(e.target.value) : null;
    setFormData(prev => ({ ...prev, maxSpeed: newValue }));
  }}
/>

非受控组件的临时修复（不推荐，但适合快速调整） #

如果不想重构为受控组件，只需给模态框添加唯一key，确保每次编辑不同对象时，模态框组件重新挂载，让defaultValue重新生效：

{isModalOpen && (
  // 用选中对象的id作为key，每次切换编辑对象都会重新渲染模态框
  <EditModal key={selectedShip.id}>
    <input type="number" defaultValue={selectedShip.maxSpeed} />
    {/* 其他输入框 */}
  </EditModal>
)}

为什么你的尝试没生效？ #

• 改type="text"没效果：如果模态框没重新渲染，defaultValue还是旧值，和输入类型无关
• 去掉String()转换：非受控组件的defaultValue接受数字，但组件没重新挂载的话，不会更新值

内容的提问来源于stack exchange，提问作者malthe.w