React bind custom handler onChange to input - reactjs

Question

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
What's wrong with my bind ?

Answer 1

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

Answer 2

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.