[ReactJS] DOM Event Listeners in a React Component

最新推荐文章于 2025-08-15 09:01:53 发布

weixin_30892889

最新推荐文章于 2025-08-15 09:01:53 发布

阅读量83

点赞数

CC 4.0 BY-SA版权

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/Answer1215/p/5240753.html

本文详细介绍了如何在React组件中利用生命周期方法`componentDidMount`监听DOM事件，具体实现了窗口宽度和滚动条位置的实时更新。通过在组件挂载时添加事件监听器，并在组件卸载时移除，确保了资源的有效管理和应用的流畅运行。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

React doesn't provide the listener to listen the DOM event. But we can do it in React life cycle:

So when the compoment did mount, we add listeners to the dom event.

And remember to remove the dom listener when the compoment unmount.

var Box = React.createClass({
  getInitialState:function(){
    return {
      width: window.innerWidth,
      scroll: document.body.scrollTop
    };
  },
  update: function(){
    this.setState({
      width: window.innerWidth,
      scroll: document.body.scrollTop
    })
  },

  componentDidMount:function(){
    window.addEventListener('resize', this.update);
    widnow.addEventListener('scroll', this.update);
  },

  componentWillUnmount:function(){
    window.removeEventListener('resize', this.update);
    window.removeEventListener('scroll', this.update);
  },

  render:function(){
    return <div>
      <p>width: {this.state.width}</p>
      <p>scroll: {this.state.scroll}</p>
    </div>;
  }
});

//React.render will be depricated in the next release
//https://facebook.github.io/react/blog/2015/09/10/react-v0.14-rc1.html#two-packages-react-and-react-dom

ReactDOM.render(<Box />, document.getElementById('box'));