7
votes

React Native + Redux Form - Utilisez le clavier Bouton Suivant pour passer au champ TextInput suivant

J'utilise Formulaire ReDux (RF) dans une application native réactive. Tout fonctionne bien, mais je ne peux pas comprendre comment obtenir le refs code> à partir du champ fort> entrer dans le champ d'entrée suivant avec le formulaire REDUX.

sans rf Ce solution fonctionnerait très bien. p>

Voici mon code: P>

class RenderInput extends Component {
   const { input, nextField, refs,
        meta: { touched, error, warning },
        input: { onChange } } = this.props
   render() {
      return (
         <Input
            returnKeyType = {'next'}
            onChangeText={onChange}
            onBlur={input.onBlur}
            onFocus={input.onFocus}
            onSubmitEditing = {(event) => {
               // refs is undefined
               refs[nextField].focus()
            }}/>
      )
   }
}

class Form extends Component {
   render() {
      return (
         <Field
            name="field1"
            focus
            withRef
            ref='field1'
            nextField = "field2"
            component={RenderInput}/>

         <Field
            name="vendor"
            withRef
            ref="field2"
            nextAction = "field3"
            component={RenderInput}/>
      )
   }
}


2 commentaires

Je viens de dire que l'attribution d'une référence directement est obsolète. La meilleure chose à faire, c'est attribuer à la référence à une variable globale que vous pouvez réutiliser après: ref = {(composentRef) => this.myref = composetref} . Voir réacteur de la documentation


J'ai posté ici Stackoverflow.com/a/56401396/6242582 Comment j'ai résolu ce problème.


5 Réponses :


13
votes

Cette solution passe des accessoires du formulaire code> composant code> sur le composant code> RenderInput CODE> et transmet une fonction rappel.

Voici le code: P>

class RenderInput extends Component {
   const { input, refField, onEnter,
        meta: { touched, error, warning },
        input: { onChange } } = this.props
   render() {
      return (
         <TextInput
            ref = {refField}
            returnKeyType = {'next'}
            onChangeText={onChange}
            onBlur={input.onBlur}
            onFocus={input.onFocus}
            onSubmitEditing={onEnter}/>
      )
   }
}

class Form extends Component {
   render() {
      return (
         <Field
            name="field1"
            focus
            withRef
            ref={(componentRef) => this.field1 = componentRef}
            refField="field1"
            component={RenderInput}
            onEnter={() => { 
               this.field2.getRenderedComponent().refs.field2.focus()
            }}/>

         <Field
            name="field2"
            withRef
            ref={(componentRef) => this.field2 = componentRef}
            refField="field2"
            component={RenderInput}/>
      )
   }
} 


10 commentaires

Un problème que j'ai toujours, c'est que si j'importe la classe RenderInput à partir d'un autre fichier, la mise au point d'erreur n'est pas une fonction. Mais si je le définis avec le même fichier, cela fonctionne.


Assurez-vous que votre exporter et importer le composant RenderInput correctement. La solution que j'ai affichée est censée être deux fichiers distincts. Cela fonctionne définitivement à ma fin.


En outre, il est très important d'utiliser un composant réactif tel que Classe RenderInput étend le composant {} comme GetRenderedComponent () ne fonctionne pas sur une composante de fonction apatrides.


Bizarre. Le renduinput rend sur l'écran. C'est juste la fonction Focus () qui échoue.


C'est étrange. Juste console.log (this.field2.getrendedComponent (). Réfs) dans la fonction inenter du champ pour voir si vous obtenez le bon ComponTref Composant. REFS doit être un objet avec tous les champs comme des accessoires et double vérifier le reffield des accessoires du champ


Je l'ai compris: j'utilisais le composant FormInput (réact-natif-éléments) au lieu de TextInput dans le fichier externe. et apparemment forminput n'a pas la fonction de mise au point


Bien taché. J'ai oublié de mentionner que j'utilisais le composant de base natif Entrée , qui est hérité de réacteur-natif textinput . Je vais mettre à jour la réponse en conséquence!


Est-il possible pour vous de partager le gist? J'ai également essayé les commentaires de la base natif, il n'a pas fonctionné que ça ne fonctionne que avec TextInput


Mise à jour: Ce qui suit est ce qui a fonctionné pour moi lors de l'utilisation de l'entrée de la base natif. ; field2.getrendrendedComponent (). Refs.field2._root.focus ()


Peut-être que cela a fonctionné dans le passé, mais cela ne fonctionne pas en ce moment. field2.getrendrendedComponent (). REFS est un objet vide maintenant



1
votes

Pour les personnes qui utilisent Redux Form + réactent des éléments natifs, suivez simplement @thomas Dittmar Réponse et ajoutez le passage suivant au composant "FormInput": textinpoputref = {reffield}

La dernière version de réact d'élément natif a ajouté la méthode Focus (), vous n'avez donc pas à vous soucier de cela.


1 commentaires

Je suis confronté à un problème où cela fait que cela enfreint la validation du champ (il valide toujours vrai). Avez-vous déjà fait face à cela?



0
votes

J'ai travaillé à obtenir une référence comme celle-ci qui a fonctionné pour moi. XXX PRE>

MAINTENANT ACCÈS Fonctionnez comme ceci. P>

this.myRef.anyFunc()


0 commentaires

1
votes

withref est obsolète, utilisez redresseurf à la place.


0 commentaires

0
votes

J'ai eu un étui d'utilisation légèrement différent, mais j'imagine que cela fonctionne aussi pour ce qui précède.

J'ai utilisé l'action de mise au point p> xxx pré>

puis dans la (coutume ) Champ de formulaire contenant le TextInput, j'ai ajouté dans la fonction Render P>

<TextInput
    ref="email"
/>
formStates.filter((state) => meta[state]).map((state) => {
   if(state === 'active'){
      this.refs.email.focus()
   }
})


0 commentaires