Maison > interface Web > js tutoriel > Comment sélectionner le TextInput suivant après avoir appuyé sur le bouton du clavier « suivant » dans React Native ?

Comment sélectionner le TextInput suivant après avoir appuyé sur le bouton du clavier « suivant » dans React Native ?

Barbara Streisand
Libérer: 2024-11-22 16:06:12
original
580 Les gens l'ont consulté

How to select the next TextInput after pressing the

Mesures:

  1. Utilisez la référence pour contrôler la mise au point

    Attribuez une référence à chaque TextInput pour contrôler le focus par programme.

  2. Gérer la modification de soumission

    Utilisez l'événement onSubmitEditing pour focaliser l'entrée suivante.

  3. Définir returnKeyType

    Définissez returnKeyType sur "next" pour les champs intermédiaires et sur "done" pour le dernier.

  4. Empêcher le licenciement du clavier

    Utilisez blurOnSubmit={false} pour garder le clavier ouvert pendant la navigation.


Exemple de code :

importer React, {useRef } depuis 'react' ;
importer { TextInput, View, StyleSheet } depuis 'react-native' ;

const App = () => {
  const input1Ref = useRef(null);
  const input2Ref = useRef(null);
  const input3Ref = useRef(null);

  retour (
    <Afficher>




<hr>

<h3>
  
  
  Propriétés clés :
</h3>

<ol>
<li>
<strong>ref</strong> : lie chaque TextInput à une référence pour le contrôle du focus.</li>
<li>
<strong>onSubmitEditing</strong> : les déclencheurs se concentrent sur le champ suivant lorsque vous appuyez sur le bouton "Suivant".</li>
<li>
<strong>returnKeyType</strong> : définit le type de bouton du clavier sur "suivant" ou "terminé".</li>
<li>
<strong>blurOnSubmit</strong> : empêche le clavier de se fermer lors du passage à l'entrée suivante. </li>
</ol>


          

            
        
Copier après la connexion

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

source:dev.to
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Derniers articles par auteur
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal