Browse Source

change some wording, add tip for events entry

- 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
parent
commit
4d7900a48a
  1. 38
      cookbook/cb-11-dom-event-listeners tip.md
  2. 43
      cookbook/cb-11-dom-event-listeners.md
  3. 37
      cookbook/cb-11-event-listeners.md

38
cookbook/cb-11-dom-event-listeners tip.md

@ -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.

43
cookbook/cb-11-dom-event-listeners.md

@ -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.

37
cookbook/cb-11-event-listeners.md

@ -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…
Cancel
Save