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

【问题标题】：Passing callbacks to other functions in javascript将回调传递给javascript中的其他函数
【发布时间】：2020-01-20 17:36:38
【问题描述】：

所以我认为我对回调和 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>
        );
}
}

【问题讨论】：

我不太明白你的问题。您想知道在onSubmit 函数内部执行时this.onFormSubmit 是如何以及何时被调用的吗？
是的@CesarPerez

标签： javascript reactjs callback this

【解决方案1】：

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

【讨论】：

【解决方案2】：

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

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

【讨论】：