Передача обратных вызовов другим функциям в javascript - PullRequest
Новая
       71

Передача обратных вызовов другим функциям в javascript

0 голосов
/ 20 января 2020

Так что я думал, что у меня хороший gr asp в обратных вызовах и this, пока я не начал изучать обработчики событий в реагировании.

Я знаю, что в приведенном ниже коде есть функция onFormSubmit, которая функция обратного вызова и вызывается, когда пользователь отправляет форму. Но поскольку функция обратного вызова - это функция, которая передается другой функции в качестве аргумента, я хочу знать, какая функция вызывает эту функцию. 

class SearchBar extends React.Component{

    state={term:""};



    onFormSubmit = ()=>{
       //do something with callback
    }

render(){
    return (
        <div className="search-bar ui segment">SearchBar
        <form onSubmit={this.onFormSubmit} className="ui form">
            <div className="field">
                <label>Video Search</label>
                <input 
                type="text" 
                value={this.state.term}
                onChange={this.onInputChange}
                />
            </div>
        </form>
        </div>
        );
}
}

Ответы [ 2 ]

1 голос
/ 20 января 2020

В вашем классе панели поиска есть несколько jsx, которые будут отображаться. В этом JSX у вас есть свойство, которое называется onSubmit. Затем этому свойству присваивается выражение JSX, которое имеет тип функции . У элементов DOM есть EventListener, к которому они могут присоединять обработчики. Если бы вам нужно было добавить элемент eventListener для элемента с использованием vanilla JS, это бы go было примерно таким 

let el = document.getElementById('test')
el.addEventListener('click',yourHandlerFunction);

React только берет вашу функцию и оборачивает ее в SyntheticEvent , затем присоединяет ее к элементу, где находится свойство. В этом случае ваш элемент формы. Он работает как любое другое событие DOM, за исключением того факта, что вы заключены в SyntheticEvent . Элемент теперь слушает событие, которое вы описали, в вашем случае onSubmit , и всякий раз, когда это действие выполняется, событие получает уведомление и вызывает соответствующую функцию-обработчик. Это очень похоже на шаблон наблюдателя .

, чтобы проверить, как события присоединяются в простых HTML свойствах

Также вас может заинтересовать интерфейс событий, поскольку он является основой всех других событий.

0 голосов
/ 20 января 2020

HTML имеют встроенные функциональные хуки, которые запускаются при наступлении определенного события. скажем, к которому вы можете прикрепить свой метод обратного вызова, который вызывается браузером автоматически при каждом событии щелчка (в нашем случае).

, поэтому для данного случая вызывается обратный вызов onSubmit формы, когда форма получает отправленный браузер проверяет, есть ли какие-либо обратные вызовы, прикрепленные к хуку onSubmit, и если да, если выполняется то же самое.

...