Browse Source

Fix broken link, spacing on events tip

main
Paul O’Shannessy 11 years ago
parent
commit
5c8c2b6f7b
  1. 8
      tips/11-dom-event-listeners.md

8
tips/11-dom-event-listeners.md

@ -9,7 +9,7 @@ next: initial-ajax.html
> Note:
>
> This entry shows how to attach DOM events not provided by React ([check here for more info](/react/docs/tips/events.html)). This is good for integrations with other libraries such as jQuery.
> This entry shows how to attach DOM events not provided by React ([check here for more info](/react/docs/events.html)). This is good for integrations with other libraries such as jQuery.
Try to resize the window:
@ -20,15 +20,19 @@ 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>;
}
@ -37,4 +41,4 @@ var Box = React.createClass({
React.renderComponent(<Box />, mountNode);
```
`componentDidMount` is called after the component's mounted and has a DOM representation. This is often a place where you'd attach generic DOM events.
`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.

Loading…
Cancel
Save