React Native,Andoid:点击图标时输入失去焦点

React Native, Andoid: input loses focus when icon clicked

提问人:John Red 提问时间:1/16/2023 更新时间:1/16/2023 访问量:57

问:

遇到意想不到的障碍 - 当我单击图标以清除输入时,输入的焦点丢失并且未处理单击。 这仅发生在 Android 上。IOS很好。

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

  const onFocusHandler = (e: NativeSyntheticEvent<TextInputFocusEventData>) => {
    onFocus && onFocus(e);
    setFocusOn();
  };
<TextInput
        {...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}
      />

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

关闭图标具有绝对位置。

我尝试使用 e.stopPropagation() 和其他一些技巧,但它无论如何都不起作用。(

Android React-Native 输入

评论


答:

0赞 Mointy 1/16/2023 #1

因为您的删除按钮是一个按钮,所以按下时它会聚焦。

要解决此问题,只需为 textinput 创建一个引用并调用函数即可。textInputReftextInputRef.current.focus()onInputClear

0赞 John Red 1/16/2023 #2

谢谢你的回答。 我还找到了这个解决方案:

添加到 ScrollView 道具 keyboardShouldPersistTaps='handled' 也有效!