Updates Quick Start examples to run as expected

Summary:Hey! Thanks so much for the hard work on this project. I’m just making my way through the documentation now, and I couldn’t get the Quick Start examples to run until I made the following changes. I have very little React experience, and even less with ES2015 stuff—it’s entirely possible I just misunderstood something in all these cases. Regardless, the examples didn’t work as-is for me, and to the best of my understand, these changes fix that. The one change I made that was maybe more of an opinion was turning: ```js const {editorState} = this.state; return <Editor editorState={editorState} onChange={this.onChange} /> ``` …into: ```js return <Editor editorState={this.state.editorState} onChange={this.onChange} /> ``` …which just reduced the complexity for me at the beginning, and had more in common with the initial Input example. Closes #180 Reviewed By: spicyj Differential Revision: D3034470 fb-gh-sync-id: c99ba4e24dd42a2c5a0634dfcc6c8faab8cd5b7c shipit-source-id: c99ba4e24dd42a2c5a0634dfcc6c8faab8cd5b7c
facebook · 981483ce0483482e98345f9196c761c862dc74f8 · kennethormandy committed with Facebook Github Bot 2 Mar 11, 2016 · Mar 11, 2016 · 981483c
1 parent 360f737
commit 981483ce0483482e98345f9196c761c862dc74f8
Unified Split

Showing with 13 additions and 13 deletions.

+5 −3 docs/QuickStart-API-Basics.md

+8 −10 docs/QuickStart-Rich-Styling.md
@@ -30,6 +30,7 @@ to provide information about the text that the user has written.
 class MyInput extends React.Component {
   constructor(props) {
     super(props);
+    this.state = {value: ''};
     this.onChange = (evt) => this.setState({value: evt.target.value});
   }
   render() {
@@ -60,15 +61,16 @@ selection within the editor will create new `EditorState` objects. Note that
 this remains efficient due to data persistence across immutable objects.
 
 ```js
-import {Editor} from 'draft-js';
+import {Editor, EditorState} from 'draft-js';
+
 class MyEditor extends React.Component {
   constructor(props) {
     super(props);
+    this.state = {editorState: EditorState.createEmpty()};
     this.onChange = (editorState) => this.setState({editorState});
   }
   render() {
-    const {editorState} = this.state;
-    return <Editor editorState={editorState} onChange={this.onChange} />;
+    return <Editor editorState={this.state.editorState} onChange={this.onChange} />;
   }
 }
 ```
@@ -44,15 +44,16 @@ We can observe and handle key commands via the `handleKeyCommand` prop, and
 hook these into `RichUtils` to apply or remove the desired style.
 
 ```js
-import {Editor, RichUtils} from 'draft-js';
+import {Editor, EditorState, RichUtils} from 'draft-js';
+
 class MyEditor extends React.Component {
   constructor(props) {
     super(props);
+    this.state = {editorState: EditorState.createEmpty()};
     this.onChange = (editorState) => this.setState({editorState});
   }
   handleKeyCommand(command) {
-    const {editorState} = this.state;
-    const newState = RichUtils.handleKeyCommand(editorState, command);
+    const newState = RichUtils.handleKeyCommand(this.state.editorState, command);
     if (newState) {
       this.onChange(newState);
       return true;
@@ -60,10 +61,9 @@ class MyEditor extends React.Component {
     return false;
   }
   render() {
-    const {editorState} = this.state;
     return (
       <Editor
-        editorState={editorState}
+        editorState={this.state.editorState}
         handleKeyCommand={this.handleKeyCommand}
         onChange={this.onChange}
       />
@@ -90,20 +90,18 @@ Here's a super-basic example with a "Bold" button to toggle the `BOLD` style.
 
 ```js
 class MyEditor extends React.Component {
-  ...
+  // …
 
   _onBoldClick() {
-    const {editorState} = this.state;
-    this.onChange(RichUtils.toggleInlineStyle(editorState, 'BOLD'));
+    this.onChange(RichUtils.toggleInlineStyle(this.state.editorState, 'BOLD'));
   }
 
   render() {
-    const {editorState} = this.state;
     return (
       <div>
         <button onClick={this._onBoldClick.bind(this)}>Bold</button>
         <Editor
-          editorState={editorState}
+          editorState={this.state.editorState}
           handleKeyCommand={this.handleKeyCommand}
           onChange={this.onChange}
         />