DOM Event Listeners in a Component Back

Note:

This entry shows how to attach DOM events not provided by React. This is good for integrations with other libraries such as jQuery.

Try to resize the window:

var Box = React.createClass({
    getInitialState: function () {
        return { windowWidth: window.innerWidth };
    },

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

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

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.

Notice that the event callback is bound to the react component and not the original element. React automatically binds methods to the current component instance for you through a process of autobinding.

Comments Copyright © aleen42 all right reserved, powered by aleen42

Empty Comments

Sign in GitHub

As the plugin is integrated with a code management system like GitLab or GitHub, you may have to auth with your account before leaving comments around this article.

Notice: This plugin has used Cookie to store your token with an expiration.

authorize