Redux Form用户名toLowerCase()真机克隆字符问题求助

我之前也碰到过类似的Redux Form实时归一化在Android真机上的兼容性bug，结合排查和实践，给你几个可行的解决思路：

1. 修复归一化函数的光标位置处理 #

问题的核心大概率是Redux Form的normalize函数在部分Android原生输入组件上，没有正确维护光标位置。当你把输入转为小写后，光标错位导致新输入的字符被插入到错误位置，看起来像是克隆了之前的内容。

你可以修改normalize函数，手动处理光标位置：

const lowercaseNormalizer = (value, previousValue, meta) => {
  const newValue = value ? value.toLowerCase() : value;
  // 同步更新光标位置，避免错位
  if (meta?.cursor != null) {
    // 计算值的长度变化，调整光标位置
    const lengthDiff = newValue.length - (previousValue?.length || 0);
    meta.cursor += lengthDiff;
  }
  return newValue;
};

然后在Field组件中引用这个归一化器：

<Field
  name="username"
  component="input"
  type="text"
  normalize={lowercaseNormalizer}
/>

2. 改用自定义输入组件的onChange处理 #

如果normalize的兼容性问题还是存在，可以绕过Redux Form的normalize机制，直接在输入组件的onChange事件里手动处理转小写和光标定位：

const UsernameInput = ({ input }) => {
  const handleInputChange = (e) => {
    const lowercaseVal = e.target.value.toLowerCase();
    input.onChange(lowercaseVal);
    // 强制把光标移到输入内容末尾，避免错位
    e.target.setSelectionRange(lowercaseVal.length, lowercaseVal.length);
  };

  return (
    <input
      {...input}
      type="text"
      onChange={handleInputChange}
    />
  );
};

// 使用自定义组件
<Field
  name="username"
  component={UsernameInput}
/>

3. 升级Redux Form到最新稳定版 #

这个问题有可能是旧版本Redux Form在Android 6.0/8.0这类系统上的已知兼容性bug，升级到最新的稳定版本（比如v8.x或v9.x，根据你的项目依赖选择）可能直接解决问题：

# npm 升级
npm update redux-form --save
# yarn 升级
yarn upgrade redux-form

你之前把转小写逻辑移到saga里能解决，是因为那是在表单提交阶段一次性处理，避开了实时输入时的光标同步问题，但实时转换的用户体验更好，上面的方案应该能帮你搞定实时归一化的兼容性问题。

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