javascript - react native - nativeEvent property? - Stack Overflow

admin管理员组

文章数量:1400174

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

} }

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

} }

• javascript
• reactjs
• react-native

Share Improve this question Follow asked Jun 15, 2017 at 15:45 user3676224user3676224 87322 gold badges1212 silver badges2525 bronze badges 3

• 1 this explains it pretty well stackoverflow./a/40092220/3473220 – Garrett McCullough Commented Jun 15, 2017 at 16:40
• 1 not the best explanation, but appreciated, thanks. – user3676224 Commented Jun 21, 2017 at 13:48
• 1 I've been asking the same question since beginning with React Native, and it seems like at this time there is no official documentation for what the various on* callbacks receive. – Mark Commented Jun 2, 2018 at 18:32

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 1

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.

本文标签： javascriptreact nativenativeEvent propertyStack Overflow