将回调传递给 javascript 中的其他函数

Question

所以我认为我很好地掌握了回调和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>
        );
}
}

Answer 1

HTML 内置函数挂钩，当特定事件发生时会触发这些挂钩。说你可以附加你的回调方法，只要点击事件发生（在我们的例子中）就会被浏览器自动调用。

因此对于给定的情况，当提交表单时调用表单 onSubmit 回调浏览器检查是否有任何回调附加到 onSubmit 钩子，如果有则执行相同的回调。

Answer 2

您的搜索栏 class 有一些将呈现的 jsx。在这个 JSX 中，你有一个名为 onSubmit 的属性。这个属性然后被分配一个 JSX 表达式，它是 类型函数 。 DOM 元素具有可以附加处理程序的 EventListeners。如果您要使用 vanilla JS 为元素分配一个添加事件监听器，它会像这样。

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

React is only taking your function and wrapping it in a SyntheticEvent 然后将其附加到属性所在的元素。在这种情况下，您的表单元素。它的工作方式与任何其他 DOM 事件一样，只是您将其包裹在 SyntheticEvent 中。该元素现在正在侦听您描述的事件，在您的情况下 onSubmit 并且每当执行此操作时，事件都会收到通知并调用适当的处理函数。它与 Observer Pattern 非常相似。

check out how events get attached in plain HTML properties

Also you might be interested in the Event Interface as it the base of all other events.

将回调传递给 javascript 中的其他函数

Passing callbacks to other functions in javascript

javascript

callback

this

reactjs