我基本上尝试使用事件监听器并为“消息”事件添加一个事件,当该应用程序是某些移动应用程序中的 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 元素内的文本。
我需要做什么才能实现这一目标?
最佳答案
如果您尝试在事件处理程序中 setState,是否会收到错误消息? addEventListener 会将您的 this 设置为处理程序绑定(bind)到的目标,在您的情况下应该是文档。除非您的文档以某种方式具有 setState 方法,否则这应该会引发错误。
只需使用箭头函数就可以修复它,或者在将其添加为事件监听器时将处理程序显式绑定(bind)到当前的 this。
如果您没有收到错误并且绑定(bind)函数没有帮助,请尝试在添加事件监听器之前和事件监听器内部控制台记录 this.setState 并检查它们是否是相同的函数。或者,尝试向 setState 添加回调以检查它是否被调用。
关于javascript - 来自 EventListener 的 ReactJS 事件不会更新 View ,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/43555218/