hashChange 的事件监听器

fra*_*al5 2 addeventlistener hashchange reactjs

我正在尝试在 ReactJS 中为我​​的页面添加一个事件侦听器。我已将其添加到 componentDidMount() 中。但仅在初始页面加载时触发。

每当地址栏中发生变化时,我如何才能触发它。

componentDidMount:function(){

        window.addEventListener("hashchange", console.log('hashchange1'));
        $(window).bind("hashchange", console.log('$ - hashchange'));
        window.onhashchange =  console.log('hashchange3');      
        ReactDOM.findDOMNode(this).addEventListener('hashChange',console.log('ReactDOM - hashchange'));
    },
Run Code Online (Sandbox Code Playgroud)

我尝试了几种不同的方法来让它工作,但它们都只在第一次加载时起作用。我究竟做错了什么?

谢谢。

paw*_*wel 6

您只是console.log在每种情况下都执行,并将其返回值添加为侦听器。您需要传递一个函数作为事件侦听器,例如:

window.addEventListener("hashchange", e => console.log('hashchange1', window.location.hash ));
Run Code Online (Sandbox Code Playgroud)

https://jsfiddle.net/ku6okrp2/

编辑以使其使用 ES5 看起来更明显:

window.addEventListener("hashchange", function(e){ 
  console.log('hashchange1', window.location.hash )
});
Run Code Online (Sandbox Code Playgroud)