CODEWITHSUNDEEP
reactjsreact-nativeecmascript-6
Grant
Grant

Reputation: 859

When getting input text, why is my evt.target.value always undefined?

I'm trying to pick up user input, save to a variable and then dispatch to the store. But no matter what I try I always get 'undefined', why is that?

I feel like I've tried everything. I initially thought my scope was wrong. Then I thought it was just unable to setState/getState, but it is setting state, just as undefined.

import React from 'react';
import { View } from 'react-native';
import { Button, Input } from 'react-native-elements';


 export default class HomeScreen extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      inputValue: ''
    };
  }

  //update input value
  updateInputValue(evt) {
    console.log(evt)
    console.log(evt.target.value)
    let saveInputValue = evt.target.value
    this.setState({
      inputValue: saveInputValue
    });
    console.log(this.state)

  }

  render() {
    return (      
      <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
        <Input
          placeholder='User Input'
          containerStyle={{width:'50%'}}
          value={this.state.inputValue}
          onChange={evt => this.updateInputValue(evt)}
        />
        <View style={{flex:0.03}}/>
          <Button title="Go to Second Screen"
            //onPress={() => {this.handleClick()}}
            buttonStyle={{ backgroundColor: '#C7D8C6' }}
          />
      </View>
    );
  }
}

In updateInputValue(evt) function:

console.log(evt) = SyntheticEvent {dispatchConfig: {phasedRegistrationNames: {captured: "onChangeCapture", bubbled: "onChange"}}, _targetInst: FiberNode, _dispatchListeners: function, _dispatchInstances: FiberNode, nativeEvent: {target: 3, text: "D", eventCount: 1}, …}

Initially console.log(evt.target.value) = {inputValue: ''} (as expected)

But onChange console.log(evt.target.valur) = {inputValue: undefined}

ANSWER for anyone visiting this post later

This simplest way to do it was suggested by a few people below (thank you):

If all you need is the text value itself, use the onChangeText event >instead: 

onChangeText={text => this.updateInputValue(text)}

The react-native-elements Input is just a wrapper around the React Native TextInput, and inherits all of its props, as you can see in the docs.

Upvotes: 2

Views: 1505

Answers (3)

Naveen Vignesh
Naveen Vignesh

Reputation: 1357

It seems you are using React Native Elements UI kit. The input component provided by the UI kits uses the same props given by default TextInput given by RN.

You can get text by two ways assuming you are using this callback.

handleTextChange = (text) => {
  this.setState({
    youName: text,
  })
}

Methods mention which props you should pass to <Input />

Method 1

onChange={evt => this.handleTextChange(evt.nativeEvent.text)} // As given by RN Docs

Method 2

onChangeText={text => this.handleTextChange(text)}

Note: The object got from the event object for onChange method is as follows.

{
   nativeEvent: {
     eventCount,
     target,
     text
   }
}

Hope this helps. Mention for any clarification on comments.

Upvotes: 0

Abhishek Gangwar
Abhishek Gangwar

Reputation: 2408

You can do the following thing to make this work.

1- Try setState using arrow function inside onChange.

onChange={event => this.setState({inputValue: event.target.value})}

2- Try Making your updateInputValue method an arrow function, because in javascript context of this changes according to how you call the function.

updateInputValue = (evt) => {
    console.log(evt)
    console.log(evt.target.value)
    let saveInputValue = evt.target.value
    this.setState({
      inputValue: saveInputValue
    });
    console.log(this.state)

  }

Upvotes: 1

Kai
Kai

Reputation: 2599

If all you need is the text value itself, use the onChangeText event instead:

onChangeText={text => this.updateInputValue(text)}

The react-native-elements Input is just a wrapper around the React Native TextInput, and inherits all of its props, as you can see in the docs.

Upvotes: 0

Related Questions