React学习笔记-特殊场景下组件的 自定义DOM 事件绑定

React学习笔记-特殊场景下组件的 自定义DOM 事件绑定

组件的 DOM 事件监听

这篇文章是讲如何给 DOM 元素绑定 React 未提供的事件 (check here for more info),或者是利用了React的事件比如onClick却在事件内e.stopPropagation()e.preventDefault()时候无法阻止冒泡传播和默认行为的解决办法。或者是当你想和其他类库比如 jQuery 一起使用的时候,需要知道这些。

Try to resize the window:

var Box = React.createClass({

  getInitialState: function() {

    return {windowWidth: window.innerWidth};

  },

 

  handleResize: function(e) {

    this.setState({windowWidth: window.innerWidth});

  },

 

  componentDidMount: function() {

    window.addEventListener('resize', this.handleResize);

  },

 

  componentWillUnmount: function() {

    window.removeEventListener('resize', this.handleResize);

  },

 

  render: function() {

    return <div>Current window width: {this.state.windowWidth}</div>;

  }

});

var Bnt=React.createClass({

getInitialState:function(){

    return {name:’buttonClick’}

},

componentDidMount:function(){

     this.refs.refBtn.addEventLiterner(‘click’,function(e){

                e.stopPropagation();

                 e.preventDefault();

                 alert(111);

     })

},

render:function(){

return <div onClick={this.divClickHandle}>

    <button ref=’refBtn’>{this.state.name}</button>

</div>

}

})

React.render(<Box />, mountNode);

componentDidMount 会在 component 渲染完成且已经有了 DOM 结构的时候被调用。通常情况下,你可以在这绑定普通的 DOM 事件。

注意,事件的回调被绑定在了 react 组件上,而不是原始的元素上。React 通过一个autobinding 过程自动将方法绑定到当前的组件实例上。

 



回复列表



回复操作






发布时间:2016-08-18 19:07:26

修改时间:2016-08-18 19:15:17

查看次数:677

评论次数:2

TA的文章总数

37