react Native onChange event has name type value undefined

Question

I am using NativeBase for react native app . I am trying to trigger event when text changes on my input fields

<Input style={Styles.VehicleMeterCenter} placeholder={this.props.item['name']} 
                    value={this.state.item.name} onChange={this.onFieldChange}/>

onFieldChange handler is as follows :-

    onFieldChange(e)
  {

    console.log("Master");
    console.log(e);

    console.log("Native Event");
    console.log(e.nativeEvent);

    const {name,type,value} = e.nativeEvent;
    console.log(name + " : " + type + " : " + value);
    //this.setState({item:{name:val}});
  }

I am confused about the output that I get, there is no type, value or name. I am not sure how do I classify if the handler was triggered from which input field as there is no such information in these structs.

Output of above code :

    10:40:46 AM: Master

10:40:46 AM: {"dispatchConfig":null,"_targetInst":null,"isDefaultPrevented":null,"isPropagationStopped":null,"_dispatchListeners":null,"_dispatchInstances":null,"type":null,"target":null,"eventPhase":null,"bubbles":null,"cancelable":null,"defaultPrevented":null,"isTrusted":null,"nativeEvent":null}

10:40:46 AM: Native Event

10:40:46 AM: {"target":622,"eventCount":1,"contentSize":{"height":24,"width":399470.46875},"text":"D"}

10:40:46 AM: undefined : undefined : undefined

What I want to achieve is that I should be able to identify which input field triggered the event, and also get the value inserted.

score 5 · Answer 1 · answered Mar 24 '18 at 16:38

5

I use "onChangeText".

<TextInput onChangeText={(txt) => this.handleChange("name", txt)}>{this.state.name}</TextInput>

and my handleChange function looks like this:

  handleChange(name, value) {
    this.setState(() => ({ [name]: value }));
  }

You can also use onChange like:

<TextInput onChange={(evt) => this.handleChange(evt, "name")}>{this.state.name}</TextInput>

in that case your function will look like this:

handleChange(evt, name) {
    const { text } = evt.nativeEvent;
    this.setState(() => ({ [name]: text }));
  }

answered Mar 24 '18 at 16:38

me_astr

922
1
14
21

Why do you use the arrow function in setState? I'm just curious, I've never seen it before. I only know this.setState({ [name] : value}); – Hylle Mar 24 '19 at 12:44
I think it is better to stick with one format as in some cases this.setState({...}) may not give expected result. https://reactjs.org/docs/state-and-lifecycle.html#state-updates-may-be-asynchronous – me_astr Mar 25 '19 at 10:50
Interesting link. But I don't think you will get any benefits from using the arrow function without arguments. You're supposed to pass the previous state and props in. In this case you'll only get the negatives, which is less perfomance since React can't batch the updates. In fact in this case it doesn't apply at all, since the value you're setting in setState is from the user, not from any props or previous states. But correct me if I'm wrong. – Hylle Mar 27 '19 at 19:30
Yes, In this case you can use this.setState({...}) also. – me_astr Mar 28 '19 at 05:14
It would be nice if I could grab the `name` (not only the `value`) from the event, that way I wouldn't have to duplicate the name in the code. But I guess native doesn't provide a way to do that :( – Fiddle Freak Jun 26 '23 at 12:20

score 4 · Answer 2 · edited Jul 12 '18 at 03:02

4

Look this

 handleChange(event, name) {
    this.setState(() => ({ [name]: event.nativeEvent.text }));
  }

Thanks

edited Jul 12 '18 at 03:02

Rai Vu

1,595
1
20
30

answered Jul 12 '18 at 02:28

Manuel Carmona

357
2
6

Welcome to StackOverflow. Consider adding to your answer by including context on the code you've included. For example, you could explain why the code they've posted doesn't work, how your answer addresses the problem the OP asked, etc. – Richie Thomas Jul 12 '18 at 02:51
+99 - I really wish this was clearer in the docs... Spent 2 hours trying to find the value of an input using NativeBase. – Brad Bird Sep 20 '18 at 22:29

score 3 · Answer 3 · answered Aug 13 '20 at 07:57

I know this is an old post but for sure the answer needs to be updated.

changeText =(e)=>{
    // fetches the props passed in textInput ... remove the console to understand more
    // console.log("e",e.target._internalFiberInstanceHandleDEV.memoizedProps) 

    // fetches  value
    // console.log("e",e.nativeEvent.text)
    let name = e.target._internalFiberInstanceHandleDEV.memoizedProps.name // fetches name i.e "Testing"
    let value = e.nativeEvent.text
    console.log(name)
    this.setState({...this.state,
       signUpfields : {...this.state.signUpfields,
            [name]:value
       }
    })
}

<View>
    <Text>{text}</Text>
        <TextInput
           placeholder="testing a textinput"
           name="Testing" 
           onChange={this.changeText}
           defaultValue="Test"
        >
    </TextInput>
</View>

This surely works for me. Might work for you as well.

e.target._internalFiberInstanceHandleDEV.memoizedProps.name works only in the development but not in the production build. When i was creating a prod build for the app this error kept coming. So finally had to use onChangeText. — kshitiz saini, Feb 25 '21 at 04:43

react Native onChange event has name type value undefined

3 Answers3