javascript - ReactJS PreventDefault 当已经传递参数时

Question

我的 onClick 按钮正在调用函数 getUserInput(i, event)，但是，由于 onClick 事件已绑定(bind) ( bind) 到 (this, id)，我不明白如何传递“event”参数？

功能:

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

按钮:

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

Answer 1

.bind 通过在开头添加传递给它的参数和默认参数并将函数绑定(bind)到正确的上下文来返回一个新函数，因此当您编写时

onClick={this.getUserInput.bind(this, id)}

getUserInput 接收 id 作为第一个参数，默认参数(即事件)作为第二个参数，因此您不需要显式传递它

bind 函数的典型实现是

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