J'utilise Formulaire ReDux (RF) dans une application native réactive. Tout fonctionne bien, mais je ne peux pas comprendre comment obtenir le sans rf Ce solution fonctionnerait très bien. p> Voici mon code: P> refs code> à partir du champ fort> entrer dans le champ d'entrée suivant avec le formulaire REDUX.
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}/>
)
}
}
5 Réponses :
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}/> ) } }
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 code> et
importer code> le composant RenderInput B> 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 {} code> comme GetRenderedComponent () B> 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) code> dans la fonction code> inenter code> du champ code> pour voir si vous obtenez le bon
ComponTref CODE> Composant.
REFS CODE> doit être un objet avec tous les champs comme des accessoires et double vérifier le
reffield code> des accessoires du champ code> code>
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 B>, qui est hérité de réacteur-natif textinput b>. 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 () Code>
Peut-être que cela a fonctionné dans le passé, mais cela ne fonctionne pas en ce moment. field2.getrendrendedComponent (). REFS code> est un objet vide maintenant
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": 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. P> textinpoputref = {reffield} code> p> p> P>
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?
J'ai travaillé à obtenir une référence comme celle-ci qui a fonctionné pour moi. MAINTENANT ACCÈS Fonctionnez comme ceci. P> this.myRef.anyFunc()
withref code> est obsolète, utilisez
redresseurf code> à la place. p>
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> 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()
}
})
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} code>. Voir réacteur de la documentation
J'ai posté ici Stackoverflow.com/a/56401396/6242582 Comment j'ai résolu ce problème.