J'ai un composant React Native
export default class Parent extends Component {
render() {
return(
<View>
<TouchableOpacity
onPress={() => this.child.method1()}
/>
<Child
onRef={ref => (this.child = ref)}
/>
</View>
)
}
}
Parent
export default class Child extends Component {
method1() {
console.log("success");
}
render() {
return(
<View/>
)
}
}
J'obtiens l'erreur "_this2.child.method1 is not a function."
D'autres choses que j'ai essayées utilisent refInput au lieu de onRef , et en faisant ref => {this.child = ref} au lieu de ref => (this.child = ref ) .
Des idées?
Merci!
4 Réponses :
Une façon de le faire est de passer une fonction à l'enfant, à laquelle l'enfant peut passer une fonction. Par exemple:
<TouchableOpacity
onPress={() => this.childFunc()}
/>
<Child addMethod={func => this.childFunc = func}/>
Ensuite, appelez simplement le props.addFunc (this.method1) depuis l'intérieur de l'enfant. Assurez-vous simplement que votre ce est celui que vous voulez.
Plus important encore, vous devriez vous demander pourquoi vous devez faire cela en premier lieu .
Utilisez ref pour appeler la méthode enfant
export default class Parent extends Component {
render() {
return(
<View>
<TouchableOpacity
onPress={() => this.refs.child.method1()}//<---------
/>
<Child
ref="child"//<-------
/>
</View>
)
}
}
Vous suggérez l'utilisation d'une ancienne API " API héritée: String Refs " " Nous vous déconseillons car les références de chaîne ont certains problèmes sont considérés comme hérités et seront probablement supprimés dans l'une des futures versions ."
Vous pouvez créer une référence en utilisant React.createRef dans le constructeur et l'attribuer à l'instance de composant enfant en utilisant ref prop
Publier que vous pouvez accéder à l'enfant en utilisant this.child.current
Exemple de code:
this.child.current.getWrappedInstance()
IF votre composant enfant est connecté à connect depuis redux, vous pouvez toujours accéder à childRef en définissant l'option withRef sur true dans connect
connect(mapStateToProps, mapDispatchToProps, null, { forwardRef: true })(Child);
Si vous utilisez la version 6 ou supérieure de redux, définir la propriété forwardRef au lieu de withRef
connect(mapStateToProps, mapDispatchToProps, null, { withRef: true })(Child);
Une fois que vous faites cela dans le parent, vous pourrez accéder à la référence cchild avec
class Child extends React.Component {
myMethod() {
console.log("myMethod called");
}
render() {
return <Text>This is child</Text>;
}
}
class App extends Component {
constructor() {
super();
this.child = React.createRef();
}
render() {
return (
<View style={styles.app}>
<View style={styles.header}>
<Image
accessibilityLabel="React logo"
source={{ uri: logoUri }}
resizeMode="contain"
style={styles.logo}
/>
<Text style={styles.title}>React Native for Web</Text>
</View>
<Child ref={this.child} />
<Button
onPress={() => {
this.child.current.myMethod();
}}
title="Example button(Click to trigger Child)"
/>
</View>
);
}
}
Cela ne fonctionne pas, c'est dire this.child.current.myMethod n'est pas une fonction
Veuillez consulter la démo. Ça marche. Définissez également l'attribut comme une référence sur Child
Pouvez-vous avoir une démo sur mobile, j'ai déjà dit qu'il fonctionnait dans la plateforme web react
Je viens de vérifier votre code dans expo snack, il fonctionne là-bas, mais je ne sais pas pourquoi il ne fonctionne pas sur mon appareil IOS.
Utilisez une fonction distincte pour handlePress comme indiqué dans l'expo
Je pense que le problème est avec ma version native de réaction, bcz je viens de créer une collation expo de mon code, et cela fonctionne dans expo. mais ça ne fonctionne pas sur mon simulateur.
@SagarChavada vous pouvez essayer de mettre à jour votre version de react, react-native et react-dom
Je viens de créer un nouveau projet avec la dernière configuration, mais cela ne fonctionne toujours pas, pour le moment ma version de réaction est ==>. "react": "16.11.0", "react-native": "0.62.2", quel est le vôtre?
assurez-vous que react et react-dom ont tous deux la même version dans votre code
@SagarChavada Ohh, vous enveloppiez votre composant enfant avec connect. Voulez-vous que je change ma réponse pour cela?
@SagarChavada a mis à jour ma réponse pour qu'elle fonctionne également avec connect
voulez-vous dire this.child.current.getWrappedInstance (). methodName () non?
@SagarChavada oui, pour exécuter la méthode
Merci, tu es une bouée de sauvetage
J'ai enfin trouvé le problème.
La réponse de @Shubham khatri fonctionnera certainement, elle ne fonctionnera pas uniquement avec redux.
si votre classe enfant est enveloppée avec connect
export default connect(mapStateToProps)(Athletes);
Cela ne fonctionnera pas dans ce cas, alors assurez-vous de l'utiliser de manière normale, si vous voulez appeler une méthode enfant depuis la classe parent.
toute solution encore