CODEWITHSUNDEEP
reactjs
Heidel
Heidel

Reputation: 3254

React bind custom handler onChange to input

This is my SearchForm.js, it creates form with two inputs keywords and city and select list date

import React from 'react';
import ReactDOM from 'react-dom';

class SearchForm extends React.Component {
    constructor(props) {
      super(props)

      this.state = {
       keywords: '',
       city: '',
       date: ''     
      }

      //this.handleChange = this.handleChange.bind(this)
      //this.handleSubmit = this.handleSubmit.bind(this)
        
      this.handleKeywordsChange = this.handleInputChange.bind(this);
     }
    
    handleKeywordsChange(event) {
        console.log(1);
    }
    
    render() {
        return ( 
            <form className='form search-form' onSubmit={this.handleSubmit}>
                <div class="form-row">
                  <div class="form-group col-md-5">
                    <label for="keywords">Keywords</label>
                    <input type="text" class="form-control" name="keywords" id="keywords" placeholder="Keywords" onChange={this.handleKeywordsChange} value={this.state.name} />

                  </div>

                  <div class="form-group col-md-5">
                    <label for="city">City</label>
                    <input type="text" class="form-control" name="city" id="city" placeholder="City" onChange={this.handleChange} value={this.state.name} />
                  </div>

                  <div class="form-group col-md-2">
                    <label for="date">Date</label>
                    <select class="form-control" name="date" id="date" onChange={this.handleChange} value={this.state.value}>
                      <option>1</option>
                      <option>2</option>
                      <option>3</option>
                      <option>4</option>
                      <option>5</option>
                    </select>
                  </div>
                 </div>

                 <div class="form-row">
                     <div class="form-group col-md-12">
                        <input id='formButton' className='btn btn-primary' type='submit' placeholder='Send' />
                    </div>
                 </div>
            </form>
        )
    }
}

export { SearchForm }

and I need to add different handle function to inputs like handleKeywordsChange, but there are some errors
enter image description here

What's wrong with my bind ?

Upvotes: 1

Views: 152

Answers (2)

Mayank Shukla
Mayank Shukla

Reputation: 104379

Error is because of this:

this.handleKeywordsChange = this.handleInputChange.bind(this);

You need to define handleInputChange, instead of handleKeywordsChange:

handleInputChange () {

}

Reason is as per MDN Doc:

The bind() method creates a new function that, when called, has its this keyword set to the provided value, with a given sequence of arguments preceding any provided when the new function is called.

So in handleKeywordsChange method you are just storing the reference of function returned by bind. So the actual function will be handleInputChange and that you need to define.

Upvotes: 1

3Dos
3Dos

Reputation: 3487

I think there is a typo in

this.handleKeywordsChange = this.handleInputChange.bind(this);

Have you tried change it to 

this.handleKeywordsChange = this.handleKeywordsChange.bind(this);

Upvotes: 1

Related Questions