Android端TextInput组件绑定的value值未正常更新问题

问题根因 #

该问题由React Native安卓端TextInput的原生实现差异导致，核心有两点：

• 当设置maxLength={1}且输入框已有内容时，安卓原生输入法会判定输入框已满，光标位于内容后方时输入新字符会被直接拦截，不会触发onKeyPress的非退格分支逻辑
• 安卓端受控TextInput的状态更新优先级低于原生输入默认行为，光标位置不同时原生的插入/删除逻辑会先于setInput执行，导致状态更新不生效

修复方案 #

方案1：低改造成本交互兼容方案 #

通过聚焦时全选内容的方式，让所有输入操作直接覆盖原有内容，适配原生输入逻辑，无需修改原有业务逻辑：

1. 保留原有TextInput和handleOnKeyPress逻辑不变，仅修改onFocus回调：

const onFocus = () => {
  // 原有onFocus逻辑保留，新增全选逻辑
  setTimeout(() => {
    refInput.current?.setSelection(0, input ? input.length : 0);
  }, 30);
};

加延时是为了兼容部分安卓机型原生聚焦逻辑后覆盖选中状态的问题，延时时间可根据实际机型适配调整。

方案2：完全受控接管输入逻辑 #

适合需要完全控制输入行为的场景，禁用原生输入默认行为，完全由JS逻辑管控输入内容：

1. 修改TextInput属性，移除maxLength限制，阻止按键默认行为，新增onChangeText兜底兼容：

<TextInput
  ref={refInput}
  onKeyPress={(e) => {
    e.preventDefault();
    handleOnKeyPress(e.nativeEvent.key);
  }}
  style={defaultStyles.input}
  value={input}
  onBlur={onBlur}
  onFocus={onFocus}
  onChangeText={(text) => {
    // 兼容部分不触发onKeyPress的第三方安卓输入法
    if (text.length > 0) {
      setInput(text.slice(-1).toUpperCase());
      onKeyAction('forward');
    }
  }}
/>

2. 调整handleOnKeyPress逻辑，过滤非可打印功能键：

const handleOnKeyPress = (key: string) => {
  if (key === 'Backspace') {
    if (input === '') {
      onKeyAction('back');
    } else {
      setInput('');
    }
    return;
  }
  // 仅处理单字符可打印内容
  if (key.length === 1) {
    setInput(key.toUpperCase());
    onKeyAction('forward');
  }
};

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