@samitouri / QOS-React-2 / commits / 2467c0e651
Fork 0

The library for web and native user interfaces.

Update examples to use onInput instead of onKeyUp

onInput has the advantage that it responds to repeated key events before onKeyUp and is called when modifying the input without the keyboard (such as pasting with the mouse). Test Plan: Opened the ballmer-peak example and docs homepage in Chrome and checked that both examples update whenever the text is changed.

Ben Alpert committed May 30, 2013 at 18:16 UTC 2467c0e6519676b8200ecc71303e4452dccde080
2 files changed +3 -3
docs/_js/examples/markdown.js
+2 -2
@@ -11,14 +11,14 @@ var MarkdownEditor = React.createClass({\n\
11 getInitialState: function() {\n\
12 return {value: 'Type some *markdown* here!'};\n\
13 },\n\
14 - handleKeyUp: React.autoBind(function() {\n\
14 + handleInput: React.autoBind(function() {\n\
15 this.setState({value: this.refs.textarea.getDOMNode().value});\n\
16 }),\n\
17 render: function() {\n\
18 return (\n\
19 <div className=\"MarkdownEditor\">\n\
20 <h3>Input</h3>\n\
21 - <textarea onKeyUp={this.handleKeyUp} ref=\"textarea\">\n\
21 + <textarea onInput={this.handleInput} ref=\"textarea\">\n\
22 {this.state.value}\n\
23 </textarea>\n\
24 <h3>Output</h3>\n\
examples/ballmer-peak/example.js
+1 -1
@@ -33,7 +33,7 @@ var BallmerPeakCalculator = React.createClass({
33 <h4>Compute your Ballmer Peak:</h4>
34 <p>
35 If your BAC is{' '}
36 - <input ref="bac" type="text" onKeyUp={this.handleChange} value={this.state.bac} />
36 + <input ref="bac" type="text" onInput={this.handleChange} value={this.state.bac} />
37 {', '}then <b>{pct}</b> of your lines of code will have bugs.
38 </p>
39 </div>