Quantcast
Channel: Active questions tagged react-native+typescript - Stack Overflow
Viewing all articles
Browse latest Browse all 6287

Calling a children method of a functional component from parent

$
0
0

I am not using class, I'd like to learn how to do it manually. I am dealing with login screen.https://snack.expo.io/@ericsia/call-function-from-child-componentIf you want to show me your code, you need to save and share the link. So I wanted a functional component for display textbox (assume ChildComponent as the function name, so export ChildComponent).
So in Parent/Screen1 I have something like this right?

import * as React from 'react';import { Text, View, StyleSheet, TouchableOpacity } from 'react-native';import Constants from 'expo-constants';// You can import from local filesimport ChildComponent from './components/ChildComponent';export default function App() {  function checkSuccess()  {    // call helloWorld from here  }  return (<View style={styles.container}><ChildComponent /><TouchableOpacity style={styles.button}        onPress={ checkSuccess } ><Text>helloWorld ChildComponent</Text></TouchableOpacity></View>  );}const styles = StyleSheet.create({  container: {    flex: 1,    justifyContent: 'center',    paddingTop: Constants.statusBarHeight,    backgroundColor: '#ecf0f1',    padding: 8,  },  button: {    alignItems: "center",    backgroundColor: "#DDDDDD",    padding: 10  },});

so if the result is invalid right, I wanted to display a tiny red error message.something like thisMy approach is if I can call a function from the ChildComponent then I may still solve it.
I googled it and most of the solution provided is for class.I tried useEffectReact.createRefuseImperativeHandle but I didn't get it work.
for start, i am just trying to call the helloWorld()

import * as React from 'react';import { TextInput , View, StyleSheet, Image } from 'react-native';export default function ChildComponent() {  function helloWorld()  {    alert("Hello World");  }  return (<TextInput placeholder="Try to call helloWorld from App.js"/>);}

Another question, if I have a textbox in my ChildComponent how do I retrieve the text/value from parent?


Viewing all articles
Browse latest Browse all 6287

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>