提问人:John Red 提问时间:1/16/2023 更新时间:1/16/2023 访问量:57
React Native,Andoid:点击图标时输入失去焦点
React Native, Andoid: input loses focus when icon clicked
问:
遇到意想不到的障碍 - 当我单击图标以清除输入时,输入的焦点丢失并且未处理单击。 这仅发生在 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() 和其他一些技巧,但它无论如何都不起作用。(
答:
0赞
Mointy
1/16/2023
#1
因为您的删除按钮是一个按钮,所以按下时它会聚焦。
要解决此问题,只需为 textinput 创建一个引用并调用函数即可。textInputRef
textInputRef.current.focus()
onInputClear
0赞
John Red
1/16/2023
#2
谢谢你的回答。 我还找到了这个解决方案:
添加到 ScrollView 道具 keyboardShouldPersistTaps='handled' 也有效!
评论