How to get a input value onChange in react variable?

Question

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.

Vishnu · Accepted Answer · 2020-03-18 06:42:56Z

1

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 
}

answered Mar 18, 2020 at 6:42

Vishnu

1,7311 gold badge17 silver badges28 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

palaѕн · Accepted Answer · 2020-03-18 06:50:06Z

1

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

edited Mar 18, 2020 at 6:50

answered Mar 18, 2020 at 6:44

palaѕн

74.2k17 gold badges123 silver badges140 bronze badges

Comments

Chintan Joshi · Accepted Answer · 2020-03-18 06:46:34Z

0

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

answered Mar 18, 2020 at 6:46

Chintan Joshi

1,3471 gold badge9 silver badges17 bronze badges

Collectives™ on Stack Overflow

How to get a input value onChange in react variable?

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related