React Native Android端点击清除图标时输入框失焦且点击无效问题

问题原因 #

Android与iOS的触摸事件处理顺序存在差异：在Android上，点击绝对定位在TextInput上方的清除图标时，会先触发TextInput的onBlur事件，而你的onBlurHandler里调用了setFocusOff，同时清除操作执行时会清空输入框内容，导致控制清除图标显示的isInputFilled变为false，清除图标组件被卸载，最终onPress事件来不及执行就被中断。iOS则会优先处理点击元素的事件，所以没有这个问题。

解决方案 #

通过添加状态变量控制onBlur的执行时机，确保清除操作完成后再处理输入框失焦逻辑：

1. 添加状态变量标记是否正在执行清除操作

const [isClearing, setIsClearing] = useState(false);

2. 修改清除图标的触摸事件，标记清除状态并执行清除逻辑

{isInputFilled && !error && editable && enabled && (
  <View style={lightInput.icon}>
    <TouchableOpacity
      onTouchStart={() => setIsClearing(true)}
      onTouchEnd={() => {
        onInputClear();
        setIsClearing(false);
      }}
      onTouchCancel={() => setIsClearing(false)}
    >
      <Close width={18} height={18} color={colors.light.grayscale[300]} />
    </TouchableOpacity>
  </View>
)}

3. 更新onBlurHandler，当处于清除状态时跳过失焦处理

const onBlurHandler = (e: NativeSyntheticEvent<TextInputFocusEventData>) => {
  if (isClearing) return;
  onBlur && onBlur(e);
  setFocusOff();
};

备选方案：手动保持输入框焦点 #

如果上述方案不生效，可以尝试在点击清除图标时手动让输入框保持焦点，确保清除操作执行：

1. 给TextInput添加引用

const textInputRef = useRef<TextInput>(null);

2. 修改TextInput组件添加ref属性

<TextInput
  ref={textInputRef}
  {...inputProps}
  keyboardType={keyboardType}
  onFocus={(e) => onFocusHandler(e)}
  onBlur={(e) => onBlurHandler(e)}
  placeholderTextColor={colors.light.grayscale[300]}
  style={[lightInput.input, isFocusedStyles, isNonEditableStyles, isDisabledStyles, isErrorStyles]}
  editable={enabled}
  selectTextOnFocus={enabled}
  value={value}
/>

3. 修改清除图标的触摸事件

<TouchableOpacity
  onTouchStart={(e) => {
    e.stopPropagation();
    textInputRef.current?.focus();
    onInputClear();
  }}
>
  <Close width={18} height={18} color={colors.light.grayscale[300]} />
</TouchableOpacity>

这样可以确保清除操作先执行，避免因为输入框失焦和组件卸载导致事件中断。

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