mirror of
https://github.com/facebook/react.git
synced 2025-11-01 09:12:30 +00:00
Ben Alpert
2467c0e651
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.
48 lines
1.2 KiB
JavaScript
48 lines
1.2 KiB
JavaScript
/**
|
|
* @jsx React.DOM
|
|
*/
|
|
|
|
function computeBallmerPeak(x) {
|
|
// see: http://ask.metafilter.com/76859/Make-a-function-of-this-graph-Thats-like-an-antigraph
|
|
x = x * 100;
|
|
return (
|
|
1-1/(1+Math.exp(-(x-6)))*.5 + Math.exp(-Math.pow(Math.abs(x-10), 2)*10)
|
|
) / 1.6;
|
|
}
|
|
|
|
var BallmerPeakCalculator = React.createClass({
|
|
getInitialState: function() {
|
|
return {bac: 0};
|
|
},
|
|
handleChange: React.autoBind(function() {
|
|
this.setState({bac: this.refs.bac.getDOMNode().value});
|
|
}),
|
|
render: function() {
|
|
var bac;
|
|
var pct;
|
|
pct = computeBallmerPeak(this.state.bac);
|
|
if (isNaN(pct)) {
|
|
pct = 'N/A';
|
|
} else {
|
|
pct = (100 - Math.round(pct * 100)) + '%';
|
|
}
|
|
return (
|
|
<div>
|
|
<img src="./ballmer_peak.png" />
|
|
<p>Credit due to <a href="http://xkcd.com/323/">xkcd</a>.</p>
|
|
<h4>Compute your Ballmer Peak:</h4>
|
|
<p>
|
|
If your BAC is{' '}
|
|
<input ref="bac" type="text" onInput={this.handleChange} value={this.state.bac} />
|
|
{', '}then <b>{pct}</b> of your lines of code will have bugs.
|
|
</p>
|
|
</div>
|
|
);
|
|
}
|
|
});
|
|
|
|
React.renderComponent(
|
|
<BallmerPeakCalculator />,
|
|
document.getElementById('container')
|
|
);
|