React CSS单位转换器输入联动异常：NumberInput组件错误排查

代码运行逻辑梳理 #

• 组件通过useState定义了EM、REM、PX、Percent、PT等CSS单位对应的数值状态，初始值基于EM=1计算。
• 为每个单位编写了处理函数（比如emHandler），当某单位数值变化时，会按转换公式计算并更新其他所有单位的状态。
• 用List数组统一管理每个单位的展示信息（标签、描述）、绑定的状态值，以及触发更新的回调函数。
• 遍历List渲染NumberInput组件，每个输入框对应一个单位，显示当前状态值并绑定对应的更新回调。

核心错误点 #

1. onChange事件参数类型不匹配 #

输入框的onChange事件默认传递的是Event对象，但你的handler函数（比如emHandler）直接期望接收number类型值。这会导致回调执行时传入的是事件对象而非数值，无法正确计算更新其他状态。

2. 输入值未做类型转换 #

输入框是type='text'，用户输入内容为字符串，需转换成数字后再传入handler，否则会出现非预期的字符串运算（如空值/非数字输入会导致NaN）。

3. 组件内部错误使用key属性 #

NumberInput组件内部的div上添加了key={key}，但React的key应放在循环渲染的组件最外层（你已在map里给NumberInput传了key），内部div无需key，属于冗余且错误的用法。

4. Handler未更新自身状态 #

以emHandler为例，当前只更新了其他单位的状态，未调用setEm(val)更新EM自身的状态，导致EM输入框的值不会同步变化。

修复方案 #

步骤1：修正NumberInput的onChange处理 #

在组件内先从事件对象中取出输入值，转为数字后再调用父组件的onChange：

function NumberInput({ value, variant, label, description, onChange, precision }) {
  const handleInputChange = (e) => {
    // 把输入字符串转成数字，空值默认设为0
    const inputValue = parseFloat(e.target.value) || 0;
    onChange(inputValue);
  };

  return (
      <div className="my-8">
          <div className="text-xl font-medium">{label} <span className="text-sm text-gray-400">({description})</span></div>
          <input type='text' value={value} onChange={handleInputChange}/>
      </div>
  );
}

步骤2：补全handler的自身状态更新 #

以emHandler为例，添加自身状态更新，其他单位的handler同理：

const emHandler = (val: number) => {
  setEm(val); // 新增：更新EM自身状态
  setRem(val);
  setPx(val * 16);
  setPercent(val * 100);
  setPt(val * 12);
};

步骤3：移除冗余key属性 #

删掉NumberInput内部div上的key={key}，保留map渲染时给NumberInput传递的key即可。

验证效果 #

修改后，任意输入框的数值变化都会被正确转换为数字，触发对应的handler更新所有关联状态，所有输入框将同步显示转换后的数值，实现联动更新需求。

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