CODEWITHSUNDEEP
javascriptnative-basereactjs-native
Muhammad Ali
Muhammad Ali

Reputation: 438

react Native onChange event has name type value undefined

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.

Upvotes: 2

Views: 10392

Answers (3)

k1941996
k1941996

Reputation: 183

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.

Upvotes: 3

Manuel Carmona
Manuel Carmona

Reputation: 367

Look this

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

Thanks

Upvotes: 4

me_astr
me_astr

Reputation: 1042

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

Upvotes: 5

Related Questions