react native textInput ; déclenche un événement lorsque l'on appuie sur "Done".

Question

J'utilise textInput pour obtenir l'âge d'un utilisateur. Sur iOS, j'ai le clavier numérique et le type de touche de retour est défini sur "done".

returnKeyType={'done'}
keyboardType="numeric" 

Pour l'instant, j'essaie juste de comprendre comment faire quelque chose lorsque l'utilisateur appuie sur le bouton "Terminé".

Voici mon champ de saisie de texte actuel

<TextInput
    placeholder="Age (Yr)"
    style={AuthScreenStyles.Input}
    autoCapitalize="none"
    autoCorrect={false}
    returnKeyType={'done'}
    keyboardType="numeric"
    ref={register({ name: 'age_year' }, { required: true })}
    onChangeText={(text) => setValue('age_year', text, true)}
    onSubmitEditing={() => {
        console.log('The button has been pressed');
    }}
/>

Je n'ai pas encore réussi à déclencher la fonction console.log(). Quelqu'un sait comment capturer le moment où l'on appuie sur le bouton "done" ? onSubmitEditing() ne fonctionne pas.

Answer 1

Dans le passé, je me souviens que cela ne fonctionnait pas avec " multiline={true} "

J'ai mis une alerte pour tester, et utilisé l'événement lui-même pour obtenir le texte. Cela devrait fonctionner :)

Un exemple dans l'expo : https://snack.expo.io/VPv8Axz4B

    <TextInput
    placeholder="Age (Yr)"
    style={AuthScreenStyles.Input}
    autoCapitalize="none"
    autoCorrect={false}
    returnKeyType={'done'}
    keyboardType="numeric"
    ref={register({ name: 'age_year' }, { required: true })}
    onChangeText={(text) => setValue('age_year', text, true)}
    onSubmitEditing = {(event) => (Alert.alert(event.nativeEvent.text))}
    multiline={false}
/>

Answer 2

Pour être un peu plus explicite, la réponse de @MattV est correcte, notez simplement que si vous utilisez son exemple, vous devez également import {Alert} from 'React Native'

Mais si vous voulez utiliser votre propre function lorsque le Done est pressé, comme dans la capture d'écran ci-dessous.

Vous pourriez alors simplement ajouter onSubmitEditing comme ceci onSubmitEditing={() => yourFunctionNameHere()}

<TextInput
                  style={styles.textBox}
                  maxLength={5}
                  placeholder="Enter Zip Code"
                  placeholderTextColor={'#6D7376'}
                  autoCompleteType="postal-code"
                  keyboardType="number-pad"
                  returnKeyType="done"
                  onChangeText={text => setZip(text)}
                  onSubmitEditing={() => yourFunctionNameHere()} // <=== here
                />