ReactJS PreventDefault при уже передаче параметра
Моя кнопка onClick вызывает функцию getUserInput(i, event), однако, поскольку событие onClick привязано (bind) к (this, id), я не могу понять, как я передам параметр «событие»?
Функция:
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>
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 1
.bind возвращает новую функцию, добавляя параметры, переданные ей в начале, за которыми следуют параметры по умолчанию и привязывает функцию к правильному контексту и, следовательно, когда вы пишете
onClick = {this.getUserInput.bind(this, id)}
getUserInput получает идентификатор в качестве первого параметра и параметры по умолчанию, т.е. событие в качестве второго, поэтому вам не нужно передавать его явно.
Типичная реализация функции 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;
}
Поскольку показанный код OP будет работать, здесь нет вопросов (пока).
@ T.J.Crowder, код OP работает, но из того, что кажется из вопроса, OP хочет понять, как он может передать событие или как getUserInput уже получает его
@ShubhamKhatri Это правильный ответ. Я не понял, что событие было вызвано как параметр по умолчанию. Я пытался вставить его в список параметров при вызове функции. Спасибо!
Это должно работать, как написано выше. Вы получите
idсi, и объект события будет следовать за ним как значение второго параметра. Более простой пример:var f2 = f1.bind(this, "a"); f2("b");приводит к тому, чтоf1вызывается с аргументами"a", "b". У тебя это не работает? Если да, обновите свой вопрос, добавив в свой вопрос минимальный воспроизводимый пример, демонстрирующий проблему, в идеале работоспособный с использованием Stack Snippets (кнопка панели инструментов[<>]). Фрагменты стека поддерживают React, включая JSX; вот как это сделать.