CODEWITHSUNDEEP
javascripthtmlreactjs
Sabrilogesh K
Sabrilogesh K

Reputation: 307

How to get a input value onChange in react variable?

I have a search text box I need to get the value onchange send the request to API when I use the normal event.target method it shows error. how to rectify it as in onchange I need to call a function with some arguments so I cannot go by ease.

my text box is :

<input className="ReactSearchBox" name="search" placeholder="Search Doctors" 
          onClick={() => {
            this.onProviderListing(this.state.skip,0);
            this.onEnable();
                  }}
          onChange={() =>this.onSearchProvider(this.state.skip,0)} />

my function where i need the onchange value is:

onSearchProvider(nSkip,nLimit,e){
      this.setState({
        limit:nLimit,
        skip:nSkip,
        listing: this.state.listing,
        searching: !this.state.searching
      })
      //console.log(nlimit);
      var headers = {
        "Content-Type":"application/json",
        "AccessToken":localStorage.TOKEN,
      }
      var _calObj = {initiatorId:localStorage.userid,visitType: "office", skip:nSkip,limit:"5", includeOfflineProviders:"true",searchQuery:"lo"}

I need to give my input values in search query onchange correspondingly, sort it out plz.

Upvotes: 1

Views: 962

Answers (3)

palaѕн
palaѕн

Reputation: 73896

You can update the onChange in jsx by passing the e event object also like:

onChange={(e) => this.onSearchProvider(this.state.skip,0,e)}

and in onSearchProvider you can access it like:

onSearchProvider(nSkip, nLimit, {target}){
   // you can see search box text here on change
   console.log(target.value) 
}

Upvotes: 1

Chintan Joshi
Chintan Joshi

Reputation: 1307

You don't need to pass state values on onChange method call.

State will be consistent throughout component.

<input className="ReactSearchBox" name="search" placeholder="Search Doctors" 
     onChange={() =>this.onSearchProvider(0)}
/>

And you can get value from event of that input as event.target.value

onSearchProvider(nLimit,e){
  // access your state values directly here like this.state.skip
  const searching = e.target.value;
}

Upvotes: 0

Vishnu
Vishnu

Reputation: 1701

You're not passing event from input. Change the onChange prop to:

       <input className="ReactSearchBox" name="search"
          placeholder="Search Doctors" 
          onClick={() => {
            this.onProviderListing(this.state.skip,0);
            this.onEnable();
                  }}
          onChange={(e) =>this.onSearchProvider(this.state.skip,0, e)}
        />

onSearchProvider(nSkip,nLimit,e){
  const value = e.target.value; // text box value 
}

Upvotes: 1

Related Questions