So im trying to wrap my head around react native and it does not look difficult.
My question is straight forward, what is the "e" object how do I use its properties such as "e.nativeEvent" and "e.nativeEvent.text", and in what situations?
I stumbled upon this object when I was testing TextInput's onChangeText and onBlur props.
As you can see below, I am able to pass an argument parameter called "value" in the onChangeText prop, to the callback handler. BUT when I tried to do the same with the onBlur, I ran into issues ( and I checked the documentation which did not mention anything about an argument being passed to the callback function handler, unlike the onChangeText).
So I found this question, which helped me figure out how to access the data in TextInput using the e.eventNative.text property.
render(){
return(
<View>
<Text>indent</Text>
<Text>indent</Text>
<TextInput
style={{height:60, backgroundColor: "#ededed"}} // must define a height for T.I in iOS
placeholder="Enter Text"
value={this.state.textValue}
onChangeText={(value) => this.onChangeText(value)}
/>
<Text>{this.state.textValue}</Text>
{/* on submit editing, will find the callback function to transfer text
when submitting button is pressed */}
<TextInput
style={{height:60, backgroundColor: "skyblue"}}
placeholder="Enter Text"
onBlur={(value) => this.onSubmit(value.nativeEvent.text)}
/>
<Text>{this.state.textSubmitted}</Text>
</View>
);
} }
For React Native, events are received over the bridge that links native code with React. In short, whenever a View is created, React also passes its ID number over to native, so as to be able to receive all events related to that element.
Wrap both of your components inside the <SafeAreaView/> component which React Native provides. The BottomContainer wraps the content of the scroll view. I have assigned the Image Height to 450px. This can vary depending upon the design and screen dimensions.
Add the method submitAndClear to our class and set the <button /> component's onPress prop to this. submitAndClear. Change the <button /> component's title prop to the string 'Submit' Add the prop clearButtonMode='always' to the <TextInput /> component — this will give us an option to clear the text at any time.
Use caretHidden={true} if you want to disable all operation like Cut Paste Copy. It will also hide your cursor as well.
onChangeText is a special event for TextInputs whose handler is passed the text of the TextInput as the initial argument (so 'value' = 'ev.nativeEvent.value' for other events).
The onBlur event doesn't have this feature. So you'll need to access the text of the TextInput like you are.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With