Как событие передается функции без передачи его через параметр?

#javascript #reactjs #react-hooks #dom-events

#javascript #reactjs #реагирующие хуки #dom-события

Вопрос:

Я новичок в React (хотя я думаю, что это может быть проблемой JS), и я следую руководству, но я не уверен, как ‘e’, который представляет onChange событие, передается функции. В Javascript, я думаю, я бы обычно написал что-то вроде onchange="updateSearch(event);" для передачи события. Вот код:

 const [search, setSearch] = useState(''); //state

const updateSearch = (e) => {   //here the onChange event is passed through
  setSearch(e.target.value);
  console.log(search);
}

return(
<input className="search-bar" type="text" value={search} onChange={updateSearch}/>
);

1. Это не то, что происходит только в react. Вот как работают прослушиватели событий в javascript. Всякий раз, когда добавляется прослушиватель событий, вам не нужно передавать событие явно.

2. @rishabh0211 Куда добавлен прослушиватель событий? Вы имеете в виду, что onChange передаст объекту события любое его значение?

3. Да. onChange — это обработчик событий, который возвращает синтетический объект события в качестве аргумента. JavaScript позволяет нам отслеживать изменение значения входных данных, предоставляя атрибут onchange . Версия обработчика событий onchange в React такая же, но в верблюжьей оболочке.

Ответ №1:

Свойство target event возвращает элемент, который вызвал событие, и извлекает значение, связанное с ним.

Таким образом, значение ={search} — это то, что передается в setSearch (например,target.value)

1. Да, я был больше смущен тем, как само «событие» передается в функцию. Как моя функция поиска обновлений узнает, что такое «e»? Поскольку я не передавал его во входном теге.