时间戳

首页 > 解决方案 > 将回调传递给javascript中的其他函数

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

问题描述

所以我认为我对回调有很好的掌握，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>
        );
}
}

标签： javascriptreactjscallbackthis

解决方案

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

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

React 只是获取你的函数并将其包装在SyntheticEvent中，然后将其附加到属性所在的元素上。在这种情况下，您的表单元素。它的工作方式与任何其他 DOM 事件一样，只是您将其包装在SyntheticEvent中。该元素现在正在侦听您描述的事件，在您的情况下是onSubmit并且每当执行此操作时，事件都会收到通知并调用适当的处理程序函数。它与观察者模式非常相似。

查看事件如何附加到纯 HTML 属性中

此外，您可能对事件接口感兴趣，因为它是所有其他事件的基础。

推荐阅读