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 useEffect
React.createRef
useImperativeHandle
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?