MaskedInput获取无空格信用卡号时无法删除内容的解决方法

删除操作异常的核心原因是你使用的MaskedInput本身是受控组件逻辑：输入框的实际显示内容、光标位置计算完全依赖你传入组件的value属性。你当前只把移除空格后的纯数字存入state，回传给组件的值和预设的mask规则（每4位带一个空格）不匹配，组件无法正确识别输入格式，就会出现内容删不动、删除卡顿的问题。

把「组件显示用的带格式值」和「接口提交用的无空格纯卡号」分开存储，不要用去空格后的值作为组件的回显值即可，具体步骤：

• 初始化state时新增一个专门用于输入框回显的字段，存储带掩码空格的原始输入值
• 给MaskedInput组件绑定value属性到上述回显字段，保证组件渲染时能完全匹配mask规则
• onChange回调中先保留原始带格式值更新回显字段，保证输入、删除的交互逻辑正常，再同步提取无空格的纯卡号存入业务字段，供接口调用使用

对应修正后的代码如下：

// state初始化
state = {
  creditCardDisplay: '', // 输入框回显专用，保留掩码格式的空格
  creditCard: '' // 业务逻辑/接口调用专用，存储无空格纯卡号
}

// render中的组件写法
<MaskedInput 
  inputMode="numeric" 
  type="text" 
  value={this.state.creditCardDisplay}
  onChange={(e) => this.checkCC(e)} 
  mask={[/\d/, /\d/, /\d/, /\d/, ' ', /\d/, /\d/, /\d/, /\d/, ' ', /\d/, /\d/, /\d/, /\d/, ' ', /\d/, /\d/, /\d/, /\d/]} 
  required
/>

// 输入回调方法
checkCC(e) {
  const rawValue = e.target.value;
  this.setState({
    creditCardDisplay: rawValue,
    creditCard: rawValue.replaceAll(" ", "")
  });
}

注意：不要修改事件对象上的原始输入值，MaskedInput内部需要依靠带掩码格式的原始值计算光标位置、校验输入规则，你只需要把原始值完整回传给组件，所有输入、删除交互就会和原生输入表现一致，去空格的纯卡号单独存储做业务使用即可，不要干预组件本身的显示格式。

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