具有两个 TextInput 元素时反应 Native 焦点问题

Question

I have two InputField components that I have created using TextInput :

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

And this is the code for the InputField component:

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>

The issue is when pressing on one InputField , it's focusing on the input but the cursor stays on the previous focused InputField . I know the .focus() function is working using console.log on the current focused input but the cursor itself does not move to the pressed element (meaning the keyboard does not appear on the correct input context).

What seems to be the issue in my code? or in general?

NOTE: that I'm using this component for additional styling and animation.

Answer 1

I reproduced your code on codesandbox HERE . It seems there isn't a problem with your code itself.

For one thing, I think you can remove "isFocus" variable since you're not using it. (OR remove the inputRef and just use the isFocus variable, which I think is better).