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

Question

所以我认为我对回调和 this 有了很好的掌握，直到我开始学习 React 中的事件处理程序。

我知道下面的代码有一个函数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

你的搜索栏类有一些将被渲染的jsx。在此 JSX 中，您有一个名为 onSubmit 的属性。然后为该属性分配一个函数类型的 JSX 表达式。 DOM 元素具有事件监听器，它们可以附加处理程序。如果你要使用 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.