React实现SSN格式化输入框时ctrl+a全选删除功能失效问题咨询

• 你在handleChangeSsn中重复给输入框绑定keyup监听事件，每次输入都会新增一个监听，不仅存在内存泄漏风险，还会导致每次按键松开后强制修改输入框DOM的value，覆盖了浏览器默认的全选选中状态，最终导致删除操作失效
• 混用React受控组件逻辑和原生DOM操作：受控组件的value由state控制，直接修改DOM的value会和React的状态更新逻辑冲突，引发各类交互异常

完全移除原生DOM绑定逻辑，采用纯React受控组件模式实现即可解决问题：

1. 用state单独存储SSN的纯数字原始值，不要存储带格式的字符串，格式转换仅在输入框展示环节执行
2. 输入处理时仅保留纯数字，限制最大长度为9位，空输入直接清空state即可兼容全选删除操作

代码示例 #

状态定义 #

// 组件内部定义state存储原始纯数字SSN
const [userResponse, setUserResponse] = useState('');

修正后的事件处理函数 #

const handleChangeSsn = (e) => {
  // 过滤所有非数字字符，拿到纯数字原始值
  const rawValue = e.target.value.replace(/\D/g, '');
  // SSN最多9位，超过长度不更新状态
  if (rawValue.length <= 9) {
    setUserResponse(rawValue);
  }
};

输入组件绑定 #

你现有的formatSocialSecurity格式化函数可以直接复用，输入组件仅需调整事件绑定即可：

<FormLabel clear="both" float="left">  Social Security Number:</FormLabel>
<Input
  data-testId="ssn-input"
  border="1px solid #E2E8F0"
  background="#FFFFFF"
  borderRadius="4px"
  placeholder="Text here"
  color="grey.900"
  // 展示时执行格式化，状态始终存储纯数字原始值
  value={formatSocialSecurity(userResponse)}
  onChange={handleChangeSsn}
  onBlur={handleChangeSsn}
/>

调整后不再通过keyup事件强制修改输入框的DOM值，全选删除时输入框返回空字符串，处理后直接清空state，不会有额外逻辑打断浏览器默认的选中状态，全选删除操作即可恢复正常。

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