React Native焦点问题时，有两个TextInput元素

Question

我使用TextInput创建了两个InputField组件:

<KeyboardAvoidingView
behavior={Platform.OS === 'ios' ? 'padding' : 'height'}
>
<View>
<InputField
value={value1}
onChangeText={onVal1Change}
/>
<InputField
value={value2}
onChangeText={onVal2Change}
/>
</View>
</KeyboardAvoidingView>

这是InputField组件的代码:

const [isFocus, setIsFocus] = useState<boolean>(false);
const inputRef = useRef<TextInput>(null);
const onPress = () => {
setIsFocus(true);
if (inputRef.current) {
inputRef.current.focus();
}
}
<TouchableWithoutFeedback onPress={onPress}>
<View>
<TextInput
{...props}
ref={inputRef}
onFocus={() => setIsFocus(true)}
onBlur={() => setIsFocus(false)}
/>
</View>
</TouchableWithoutFeedback>

问题是当按下一个InputField时，它专注于输入，但光标停留在先前聚焦的InputField上。我知道.focus()函数在current聚焦输入上使用console.log工作，但光标本身没有移动到按下的元素(意味着键盘没有出现在正确的输入上下文中)。

我的代码中似乎有什么问题?还是总的来说?

注意:我正在使用这个组件来添加样式和动画。

Answer 1

我在codesandbox上复制了你的代码。看来你的代码本身没有问题。

首先，我认为你可以删除' isfocus ';变量，因为你不使用它。(或删除inputRef，只使用isFocus变量，我认为这是更好的)。