我正在制作 Package react-native组件的自定义组件。我正在制作MyInput组件。它使用TextInput组件。我想知道TextInput组件的状态,但我不想使用onFocus或onBlur等。我正试着通过所有这些 prop 。我目前正在尝试使用refs,但它不能正常工作,因为有延迟。“isFocused”只在我开始输入时变为真,而不是在单击时。有没有什么好办法解决这个问题?
interface InputProps extends TextInputProps {
}
export const Input = ({
children,
...props
}: PropsWithChildren<InputProps>) => {
const { themeStyles } = useContext(ThemeContext);
const { styles } = useStyles(themeStyles);
const inputRef = useRef<TextInput>(null);
const isFocused = inputRef.current?.isFocused(); // not working properly
return (
<View style={[styles.inputContainer]}>
<TextInput ref={inputRef} {...props} style={[styles.input, isFocused && styles.blueText]}>
{children}
</TextInput>
</View>
);
};
1条答案
按热度按时间3npbholx1#
老实说,如果不使用
onFocus
和onBlur
,我看不出有什么好方法可以做到这一点。您的isFocused
变量仅在组件重新呈现时更新,这就是您看到不喜欢的行为的原因。你可以尝试一下,但我不确定它是否理想,或者是否会产生预期的结果:
我不知道您的限制是什么,但根据您的描述,我可能会尝试将传递给
Input
的onFocus
和onBlur
属性与设置所需样式的内部函数合并。就像这样:或者,您是否考虑过使用像React Native Paper这样的库?它的
TextInput
组件为您处理了这一点,并为聚焦/非聚焦样式公开了 prop 。