CODEWITHSUNDEEP
javascriptreactjsreact-native
user3676224
user3676224

Reputation: 873

react native - nativeEvent property?

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>
);

} }

Upvotes: 6

Views: 22299

Answers (1)

iThompkins
iThompkins

Reputation: 165

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.

Upvotes: 1

Related Questions