You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 
 

1.1 KiB

id title layout permalink prev next
dom-event-listeners DOM Event Listeners in a Component tips dom-event-listeners.html props-in-getInitialState-as-anti-pattern.html initial-ajax.html

Note:

This entry shows how to attach DOM events not provided by React (check here for more info). This is good for integrations with other libraries such as jQuery.

Try to resize the window:

/** @jsx React.DOM */

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>;
  }
});

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

componentDidMount is called after the component is mounted and has a DOM representation. This is often a place where you would attach generic DOM events.