javascript - 来自 EventListener 的 ReactJS 事件不会更新 View

Question

我基本上尝试使用事件监听器并为“消息”事件添加一个事件，当该应用程序是某些移动应用程序中的 WebView 时，该事件会获取外部事件。

问题是，当事件到来时， react 组件不会更新。我可以确定该事件确实进入了我的事件监听器函数，但是，实际上，即使我执行 setState， react 组件也不会更新。

这是我的代码:

    import React, { Component } from 'react';
    import logo from './logo.svg';
    import './App.css'; 

    var showIfEventHappenedAndReactUpdated = false;

    class App extends Component {

        componentDidMount() {

           //event listener to get events from external views
           //when this app is used as a webview for example
           document.addEventListener('message', function(e){

              //I can see the event coming through here
              //However, the react component itself doesn't update
              showIfEventHappenedAndReactUpdated = true;

              //I have even tried putting a this.setState({}) here but it doesn't work...as it doesn't update the react-component

           }) 
        }

      render() {

        if(showIfEventHappenedAndReactUpdated){
            return (
              <div className="App">
                <p>Event Occured and React Updated</p>
              </div>
            );
        }else{
            return (
               <div className="App">
                <p>Event DID NOT OCCUR YET</p>
               </div>
            );
        }

      }
    }

    export default App;

但是如果我像这样在内部获取“p”标签

    import React, { Component } from 'react';
    import logo from './logo.svg';
    import './App.css'; 



    class App extends Component {

        componentDidMount() {

           //event listener to get events from external views
           //when this app is used as a webview for example
           document.addEventListener('message', function(e){

              document.getElementsByTagName('p')[0].innerHTML = "EVENT OCCURED"
           }) 
        }

      render() {
            return (
              <div className="App">
                <p>Event HAS NOT Occured</p>
              </div>
            );
        }

      }
    }

    export default App;

然后就可以了。唯一的行更改是

document.getElementsByTagName('p')[0].innerHTML = "EVENT OCCURED"

但是，我需要实际更新 React View ，而不是更改原始 DOM 元素内的文本。

我需要做什么才能实现这一目标？

Answer 1

如果您尝试在事件处理程序中 setState，是否会收到错误消息？ addEventListener 会将您的 this 设置为处理程序绑定(bind)到的目标，在您的情况下应该是文档。除非您的文档以某种方式具有 setState 方法，否则这应该会引发错误。

只需使用箭头函数就可以修复它，或者在将其添加为事件监听器时将处理程序显式绑定(bind)到当前的 this。

如果您没有收到错误并且绑定(bind)函数没有帮助，请尝试在添加事件监听器之前和事件监听器内部控制台记录 this.setState 并检查它们是否是相同的函数。或者，尝试向 setState 添加回调以检查它是否被调用。