{"files":[{"path":"docs\/docs\/event-handling.md","status":"M"}],"patch":"diff --git a\/docs\/docs\/event-handling.md b\/docs\/docs\/event-handling.md\nindex fc554855fe..3de935c682 100644\n--- a\/docs\/docs\/event-handling.md\n+++ b\/docs\/docs\/event-handling.md\n@@ -122,3 +122,103 @@ var handleToggle = function(enabled) {\n };\n var myToggleLink = ;\n ```\n+\n+### Common Patterns\n+\n+With React your event handlers should be quite small. Large event handlers may\n+be symptomatic of code that should be moved into helpers or into `render()`.\n+Here are some common usage patterns for event handlers.\n+\n+#### Updating State\n+\n+The most common thing to do in response to a user action is to call\n+`this.setState()` to update the component's state, which will in turn trigger\n+an update to the rendered component.\n+\n+#### Server Requests\n+\n+Many event handlers will issue a server request to read or write some data in\n+response to an event. The response handler for the request will often call\n+`this.setState()`.\n+\n+#### Invoke a Callback\n+\n+Your component will often be a small, reusable building block that does not know\n+how to respond to a user action. In these situations, we delegate the\n+responsibility to the owner by exposing a handler on `this.props`. This is what\n+the `ToggleLink` example above is doing.\n+\n+#### Inter-component Communication\n+\n+A common scenario involves communicating to **Component A** that a user action\n+has occurred on **Component B**. To solve this problem, a common parent to\n+both components should listen for the event on **Component B**, update its\n+internal state, and pass that data into **Component A**.\n+\n+For example, say we have two components: **Clicker**, a component that fires an\n+`onCountChange` custom event, and **ClickCountLabel**, a component that displays\n+the number of clicks that have happened:\n+\n+```javascript\n+var Clicker = React.createClass({\n+ getInitialState: function() {\n+ return {count: 0};\n+ },\n+ render: function() {\n+ return Click me!<\/span>;\n+ },\n+ handleClick: React.autoBind(function() {\n+ this.setState({count: this.state.count + 1});\n+ if (this.props.onCountChange) {\n+ this.props.onCountChange(this.state.count);\n+ }\n+ })\n+});\n+\n+var ClickCountLabel = React.createClass({\n+ render: function() {\n+ return

You have clicked {this.props.count}<\/strong> times.<\/p>;\n+ }\n+});\n+\n+var ClickApp = React.createClass({\n+ render: function() {\n+ var count = 0;\n+ return (\n+

\n+ \n+ \n+ <\/div>\n+ );\n+ },\n+ handleCountChange: React.autoBind(function(count) {\n+ \/\/ Somehow update `count`.\n+ })\n+});\n+```\n+\n+In order to communicate the click count from `Clicker` to `ClickCountLabel`, we\n+modify `ClickApp` to maintain state that will be passed into `ClickCountLabel`:\n+\n+```javascript{2-4,6,15}\n+var ClickApp = React.createClass({\n+ getInitialState: function() {\n+ return {count: 0};\n+ },\n+ render: function() {\n+ var count = this.state.count;\n+ return (\n+
\n+ \n+ \n+ <\/div>\n+ );\n+ },\n+ handleCountChange: React.autoBind(function(count) {\n+ this.setState({count: count});\n+ })\n+});\n+```\n+\n+Now when `Clicker` fires the `onCountChange` event, the `ClickCountLabel` will\n+get updated!\n","parents":["0487cc8dea6db416ddee296184e1b0b7b59a7c70"],"commit":{"revision":"99088b38d3554105d6ea8694c38c2e172227e804","authorName":"yungsters","shortRevision":"99088b38d3","authoredAt":"2013-05-29T13:48:12-07:00","subject":"[docs] Improve \"Event Handling\" documentation.","authorEmail":"yungsters@fb.com"},"body":"Added some additional examples to explain common usage patterns for custom events."}

dillon1000/react

Files changed