My onClick button is calling the function getUserInput(i, event), however, since the onClick event is bound (bind) to (this, id), I can't understand how I will pass the over "event" parameter?
Function:
getUserInput = (i, event) => {
event.preventDefault();
const searchLocation = document.getElementById(i).value;
this.state.locationArray[i].location = searchLocation;
this.setState({
locationArray: this.state.locationArray
})
this.createGrid();
}
Button:
<form className="form" role="search" autoComplete="off">
<input id={id} className="searchBar" type="search" name="searchField" placeholder={filledArray[i].name}></input>
<button onClick={this.getUserInput.bind(this, id)} value="submit" className="searchButton"><i className="fa fa-search"></i></button>
</form>
.bind return a new function by adding the parameters passed to it at the beginning followed by the default parameters and binding the function to the correct context and hence when you write
onClick={this.getUserInput.bind(this, id)}
getUserInput receives id as the first parameter and the default parameters i.e event as the second so you don't need to pass it explicitly
A typical implementation of bind function would be
Function.prototype.bind = function(context){
var that = this,
slicedArgs = Array.prototype.splice.call(arguments, 1),
bounded = function (){
var newArgs = slicedArgs.concat(Array.prototype.splice.call(arguments, 0));
return that.apply(context,newArgs);
}
bounded.prototype = that.prototype;
return bounded;
}
Collected from the Internet
Please contact [email protected] to delete if infringement.
Comments