CODEWITHSUNDEEP
react-native
James Thomas
James Thomas

Reputation: 169

How to make e.target.value in React-native?

I am transferring React to React Native.
But I am sticked to the problem using e.target.value.
This is a code of React that works well.

  _searchContact = (e) => { this.state.keyword 
    this.setState({
      keyword : e.target.value
    });
  }

ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ

    <input
      name="keyword"
      placeholder="Search"
      value={this.state.keyword} 
      onChange={this._searchContact} 
    />

And I tried to write again with the way of React-native
But it doesn't work.

  _searchContact = (e) => { 
    this.setState({
      keyword : e.nativeTarget.value
    });
  }

      

     <TextInput
        style={{height: 40, borderColor: 'gray', borderWidth: 1}}
        name="keyword"
        placeholder="Search"          
        onChangeText={this._searchContact}        
        value={this.state.keyword} 
    />

Upvotes: 5

Views: 10788

Answers (2)

Jacob Bralish
Jacob Bralish

Reputation: 271

If you are using onChangeText you'll have to use an anonymous function and pass in 'text' like so

(text) => this._searchContact(text)

And instead of passing e into your method pass test in as a parameter and set keyword equal to text.

 _searchContact = (text) => { 
 this.setState({
  keyword : text
 });
}

Upvotes: 5

Suraj Malviya
Suraj Malviya

Reputation: 3783

Just use e as the value and set it to keyword in setState.

Your code should work only with the below code:

_searchContact = (e) => { 
    this.setState({
      keyword : e
    });
  }

Actually onChange and onChangeText are both fired when text input's text changes, but onChange doesn't provide the changed text, its just a mere intimation callback, so to extract value of the current text being typed, onChangeText gives a callback with the changed text as the param for the callback.

For reference read this.

Upvotes: 1

Related Questions