mirror of
https://github.com/reactjs/react.dev.git
synced 2026-02-24 12:43:05 +00:00
ccba6965b6
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.
43 lines
1.0 KiB
JavaScript
43 lines
1.0 KiB
JavaScript
/**
|
|
* @jsx React.DOM
|
|
*/
|
|
|
|
var MARKDOWN_COMPONENT = "\
|
|
/** @jsx React.DOM */\n\
|
|
\n\
|
|
var converter = new Showdown.converter();\n\
|
|
\n\
|
|
var MarkdownEditor = React.createClass({\n\
|
|
getInitialState: function() {\n\
|
|
return {value: 'Type some *markdown* here!'};\n\
|
|
},\n\
|
|
handleInput: React.autoBind(function() {\n\
|
|
this.setState({value: this.refs.textarea.getDOMNode().value});\n\
|
|
}),\n\
|
|
render: function() {\n\
|
|
return (\n\
|
|
<div className=\"MarkdownEditor\">\n\
|
|
<h3>Input</h3>\n\
|
|
<textarea onInput={this.handleInput} ref=\"textarea\">\n\
|
|
{this.state.value}\n\
|
|
</textarea>\n\
|
|
<h3>Output</h3>\n\
|
|
<div\n\
|
|
className=\"content\"\n\
|
|
dangerouslySetInnerHTML={{\n\
|
|
__html: converter.makeHtml(this.state.value)\n\
|
|
}}\n\
|
|
/>\n\
|
|
</div>\n\
|
|
);\n\
|
|
}\n\
|
|
});\n\
|
|
\n\
|
|
React.renderComponent(<MarkdownEditor />, mountNode);\
|
|
";
|
|
|
|
React.renderComponent(
|
|
<ReactPlayground codeText={MARKDOWN_COMPONENT} />,
|
|
document.getElementById('markdownExample')
|
|
);
|