Browse Source
- No need to mention React, you know you're working with it =). - Wrap code elements in back ticks, so that they get the "box" styling for md. - You'd want the snippet to work inside the live editor, so you need to `renderComponent`. As per wiki specification, the DOM element on which to mount is `mountNode`, just like on the front page. - Don't forget the JSX pragma, or else your `render` fails. - Nitpick: empty line after the end of md. - No need for jQuery reference since 1. The general mood around React is that you don't need jQuery. 2. The syntax' still clear without jQuery. 3. We're doing a jQuery integration entry =). - `getInitialState` was absent. - You don't need `componentWillMount` here. fetch them in `getInitialState`. - The non-spoken convention seems to call the event handler `"handle" + eventName`. So `handleResize` clearly indicates it's a `resize` handler while `updateDimensions` might do something else. This latter name might actually be better under circumstances where you use call the method directly somewhere, but since we removed the only direct usage in `componentWillMount` this is fine. - Went OCD again and tried to keep the code short. `width` is enough of a demo. Removed `height`. - Distinguish between DOM events and React events. Wish we go full React events in a near future.main
Cheng Lou
11 years ago
committed by
Connor McSheffrey
3 changed files with 81 additions and 37 deletions
@ -0,0 +1,38 @@ |
|||
--- |
|||
id: dom-event-listeners-tip |
|||
title: DOM event listeners in a component |
|||
layout: docs |
|||
permalink: dom-event-listeners-tip.html |
|||
--- |
|||
|
|||
> Note: |
|||
> |
|||
> This entry shows how to attach DOM events not provided by React ([check here for more info](events.html)). This is good for integrations with other libraries such as jQuery. |
|||
|
|||
This example displays the window width: |
|||
|
|||
```js |
|||
/** @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's mounted and has a DOM representation. This is often a place where you'd attach generic DOM events. |
@ -0,0 +1,43 @@ |
|||
--- |
|||
id: dom-event-listeners |
|||
title: DOM event listeners in a component |
|||
layout: docs |
|||
permalink: dom-event-listeners.html |
|||
--- |
|||
|
|||
### Problem |
|||
You want to listen to an event inside a component. |
|||
|
|||
### Solution |
|||
> Note: |
|||
> |
|||
> This entry shows how to attach DOM events not provided by React ([check here for more info](events.html)). This is good for integrations with other libraries such as jQuery. |
|||
|
|||
This example displays the window width: |
|||
|
|||
```js |
|||
/** @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); |
|||
``` |
|||
|
|||
### Discussion |
|||
`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. |
@ -1,37 +0,0 @@ |
|||
--- |
|||
id: event-listeners |
|||
title: event listening in a React component |
|||
layout: docs |
|||
permalink: event-listeners.html |
|||
--- |
|||
|
|||
### Problem |
|||
You want to listen to an event inside a React component. |
|||
|
|||
### Solution |
|||
You can listen in componentDidMount. The below example will display the window dimensions. |
|||
|
|||
```js |
|||
var WindowDimensions = React.createClass({ |
|||
render: function() { |
|||
return <span>{this.state.width} x {this.state.height}</span>; |
|||
}, |
|||
updateDimensions: function() { |
|||
this.setState({width: $(window).width(), height: $(window).height()}); |
|||
}, |
|||
componentWillMount: function() { |
|||
this.updateDimensions(); |
|||
}, |
|||
componentDidMount: function() { |
|||
window.addEventListener("resize", this.updateDimensions); |
|||
// Using jQuery $(window).on('resize', this.updateDimensions); |
|||
}, |
|||
componentWillUnmount: function() { |
|||
window.removeEventListener("resize", this.updateDimensions); |
|||
// Using jQuery $(window).off('resize', this.updateDimensions); |
|||
} |
|||
}); |
|||
``` |
|||
|
|||
### Discussion |
|||
componentDidMount is invoked when the component has been mounted and has a DOM representation. Use this as an opportunity to operate on the DOM when the component has been initialized and rendered for the first time. |
Loading…
Reference in new issue