Getting an input value dynamically in a React variable when there is a change in the input field

Question

Getting an input value dynamically in a React variable when there is a change in the input field

I am having an issue with my search text box. I need to extract the value onchange and send a request to an API, but when I try using the normal event.target method, it shows an error. How can I fix this? The problem is that onchange, I need to call a function with some arguments, so I cannot take the easy route.

Here is the code for my text box:

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

This is the function where I need the onchange value:

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 pass my input values in the search query onchange accordingly. Can you help me resolve this?

javascript html reactjs

Answer 1

Answer №1

Make sure to include the event parameter in your input onChange function. Here's how you can update it:


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

onSearchDataUpdate(skip, limit, e){
  const inputValue = e.target.value; // retrieve text box value
}

Answer 2

Make sure to include the event parameter in your input onChange function. Here's how you can update it:


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

onSearchDataUpdate(skip, limit, e){
  const inputValue = e.target.value; // retrieve text box value
}

Answer 3

Answer №2

You have the option to enhance the onChange function in jsx by including the e event object like this:

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

In the onSearchProvider method, you can then access it as shown below:

onSearchProvider(nSkip, nLimit, {target}){
   // The search box text will be displayed here on change
   console.log(target.value) 
}

Answer 4

You have the option to enhance the onChange function in jsx by including the e event object like this:

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

In the onSearchProvider method, you can then access it as shown below:

onSearchProvider(nSkip, nLimit, {target}){
   // The search box text will be displayed here on change
   console.log(target.value) 
}

Answer 5

Answer №3

When it comes to the onChange method, passing state values is unnecessary.

The state remains consistent within the component.

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

You can easily retrieve the input value using `event.target.value`.

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

Answer 6

When it comes to the onChange method, passing state values is unnecessary.

The state remains consistent within the component.

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

You can easily retrieve the input value using `event.target.value`.

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

Getting an input value dynamically in a React variable when there is a change in the input field

Answer №1

Answer №2

Answer №3

Similar questions

Dividing an AngularJS module across multiple iFrames on a single webpage

Guide to developing an input field with increase and decrease buttons in React Native

Securely encoding information with PHP and decrypting it using JavaScript

Personal Information Management

Stylish hover effects displayed on disabled button using Styled Components

Is it possible to modify the spacing of menu items in the React Material-ui Drawer component?

Using Javascript to make a call to a RESTful endpoint

A collection of items that mysteriously affix themselves to the top of the page as

Overflow due to cascading style sheets

When using JavaScript to redirect with window.location, the referrer header is not properly set

Exploring the limitations of middlewares in supporting independent routers

Adding a unique key to every element within a JavaScript array

Changing the order of element names depending on their location within the parent element using jQuery

display information with html

Why is the picture not showing up on the screen?

Turning off v-navigation-drawer for certain routes in Vue.js

Creating JEST unit tests for a basic functionality

Show a pop-up form when a user focuses on it using React

Stop users from saving the page in Next.js

I noticed that my API call is being executed twice within the router function