React数字输入框无法清空问题：输入值后无法删除首位数字

核心问题 #

1. 空输入无法处理：当输入框被清空或删至空字符串时，parseFloat("")返回NaN，原函数直接return不更新状态，导致输入框绑定的旧值无法被清除，表现为无法删除首位数字或清空输入框。
2. 重复对象引用：初始的defaultSets和defaultCardioSets复用了同一个set对象的引用，导致多个集合项的id重复，React渲染时会复用组件，引发输入框状态异常。

修复步骤 #

1. 修复空输入的状态更新逻辑 #

修改handleUpdatePerformance函数，明确处理空输入场景，确保输入框清空时状态能正确更新：

function handleUpdatePerformance(
  e: React.ChangeEvent<HTMLInputElement>,
  id: string
) {
  e.preventDefault();

  const inputValue = e.target.value.trim();
  let updatedValue = 0;

  if (inputValue !== "") {
    const parsedValue = parseFloat(inputValue);
    updatedValue = isNaN(parsedValue) ? 0 : parsedValue;
  }

  const updatedSets = sets.map((setItem) => {
    if (setItem.id === id) {
      return { ...setItem, weight: updatedValue };
    }
    return setItem;
  });

  setSets(updatedSets);
}

2. 避免重复对象引用 #

创建工厂函数生成独立的集合项，确保每个set都有唯一的id：

// 替换原有的set定义和默认集合
const createSet = () => ({
  id: uuidv4(),
  weight: 0,
  rep: 0,
});

const defaultSets = [createSet(), createSet(), createSet()];
const defaultCardioSets = [createSet()];

// 修改handleAddSet函数，生成新的独立集合项
function handleAddSet(e: React.MouseEvent<HTMLButtonElement>) {
  e.preventDefault();
  setSets([...sets, createSet()]);
}

3. 保留输入框的显示逻辑 #

原输入框的value绑定逻辑可保留，确保状态为0时输入框显示空字符串：

<input
  id={`set_${i}_metric`}
  type="number"
  className="px-2 py-1 w-1/4 my-2"
  placeholder={exercise.metric}
  value={set.weight === 0 ? "" : set.weight}
  required
  onChange={(e) => handleUpdatePerformance(e, set.id)}
/>

修复原理 #

• 处理空输入时，强制将状态设为0，配合输入框的value绑定规则，实现清空显示的效果；
• 每个集合项使用独立对象和唯一id，避免React渲染时的组件复用冲突，确保输入框状态独立可控。

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