typescript - react-native textInput onChangeText issue - Stack Overflow

admin管理员组

文章数量:1122832

import React, {useRef, useState} from 'react';
import {KeyboardAvoidingView, Platform, ScrollView, TextInput} from 'react-native';
import {SafeAreaView} from "react-native-safe-area-context";

export const ProfileScreen: React.FC = () => {
    const [userInfo, setUserInfo] = useState({
        name: '',
        lastName: '',
    });
    const scrollViewRef = useRef<ScrollView>(null);
    const inputNameRef = useRef<TextInput>(null);
    const inputLastNameRef = useRef<TextInput>(null);
    
    ...
    return (
        <SafeAreaView style={{flex: 1}}>
            <KeyboardAvoidingView
                behavior={(Platform.OS === 'iOS') ? 'padding' : 'height'}
                style={{flex: 1}}>
                <ScrollView
                    keyboardShouldPersistTaps={'handled'}
                    ref={scrollViewRef}
                    showsHorizontalScrollIndicator={false}
                    showsVerticalScrollIndicator={false}>
                    <TextInput
                        ref={inputNameRef}
                        placeholder={'Your Name'}
                        onChangeText={(text) => {
                            setUserInfo((prevState) => ({...prevState, name: text}));
                        }}
                        value={userInfo.name}
                        onSubmitEditing={inputLastNameRef.current?.focus()}
                    />
                    <TextInput
                        ref={inputLastNameRef}
                        placeholder={'Your Last Name'}
                        onChangeText={(text) => {
                            setUserInfo((prevState) => ({...prevState, lastName: text}));
                        }}
                        value={userInfo.lastName}
                    />
                </ScrollView>
            </KeyboardAvoidingView>
        </SafeAreaView>
    );
};    

When I tap on the TextInput, the keyboard opens. However, when I press a key (triggering a state update), it closes. What am I missing?

When I tap on the TextInput, the keyboard opens. However, when I press a key (triggering a state update), it closes. What am I missing?

import React, {useRef, useState} from 'react';
import {KeyboardAvoidingView, Platform, ScrollView, TextInput} from 'react-native';
import {SafeAreaView} from "react-native-safe-area-context";

export const ProfileScreen: React.FC = () => {
    const [userInfo, setUserInfo] = useState({
        name: '',
        lastName: '',
    });
    const scrollViewRef = useRef<ScrollView>(null);
    const inputNameRef = useRef<TextInput>(null);
    const inputLastNameRef = useRef<TextInput>(null);
    
    ...
    return (
        <SafeAreaView style={{flex: 1}}>
            <KeyboardAvoidingView
                behavior={(Platform.OS === 'iOS') ? 'padding' : 'height'}
                style={{flex: 1}}>
                <ScrollView
                    keyboardShouldPersistTaps={'handled'}
                    ref={scrollViewRef}
                    showsHorizontalScrollIndicator={false}
                    showsVerticalScrollIndicator={false}>
                    <TextInput
                        ref={inputNameRef}
                        placeholder={'Your Name'}
                        onChangeText={(text) => {
                            setUserInfo((prevState) => ({...prevState, name: text}));
                        }}
                        value={userInfo.name}
                        onSubmitEditing={inputLastNameRef.current?.focus()}
                    />
                    <TextInput
                        ref={inputLastNameRef}
                        placeholder={'Your Last Name'}
                        onChangeText={(text) => {
                            setUserInfo((prevState) => ({...prevState, lastName: text}));
                        }}
                        value={userInfo.lastName}
                    />
                </ScrollView>
            </KeyboardAvoidingView>
        </SafeAreaView>
    );
};    

When I tap on the TextInput, the keyboard opens. However, when I press a key (triggering a state update), it closes. What am I missing?

When I tap on the TextInput, the keyboard opens. However, when I press a key (triggering a state update), it closes. What am I missing?

• typescript
• react-native
• textinput
• keyboardavoidingview

Share Improve this question Follow asked Nov 22, 2024 at 10:47 Tugberk UlucanTugberk Ulucan 1322 bronze badges

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 0

The issue arises because the onSubmitEditing callback for your TextInput is being executed incorrectly. Specifically, you are calling the focus method directly in the onSubmitEditing prop. This results in the method being called immediately during the rendering phase, instead of being assigned as a callback to the onSubmitEditing event. Consequently, it disrupts the input handling behavior and causes the keyboard to close.

To fix this, you need to wrap the focus method call in an arrow function so that it is executed only when the onSubmitEditing event occurs. Here's the corrected code:

import React, {useRef, useState} from 'react';
import {KeyboardAvoidingView, Platform, ScrollView, TextInput} from 'react-native';
import {SafeAreaView} from "react-native-safe-area-context";

export const ProfileScreen: React.FC = () => {
    const [userInfo, setUserInfo] = useState({
        name: '',
        lastName: '',
    });
    const scrollViewRef = useRef<ScrollView>(null);
    const inputNameRef = useRef<TextInput>(null);
    const inputLastNameRef = useRef<TextInput>(null);
    
    return (
        <SafeAreaView style={{flex: 1}}>
            <KeyboardAvoidingView
                behavior={(Platform.OS === 'iOS') ? 'padding' : 'height'}
                style={{flex: 1}}>
                <ScrollView
                    keyboardShouldPersistTaps={'handled'}
                    ref={scrollViewRef}
                    showsHorizontalScrollIndicator={false}
                    showsVerticalScrollIndicator={false}>
                    <TextInput
                        ref={inputNameRef}
                        placeholder={'Your Name'}
                        onChangeText={(text) => {
                            setUserInfo((prevState) => ({...prevState, name: text}));
                        }}
                        value={userInfo.name}
                        onSubmitEditing={() => inputLastNameRef.current?.focus()} // Use arrow function here
                    />
                    <TextInput
                        ref={inputLastNameRef}
                        placeholder={'Your Last Name'}
                        onChangeText={(text) => {
                            setUserInfo((prevState) => ({...prevState, lastName: text}));
                        }}
                        value={userInfo.lastName}
                    />
                </ScrollView>
            </KeyboardAvoidingView>
        </SafeAreaView>
    );
};

本文标签： typescriptreactnative textInput onChangeText issueStack Overflow