Skip to content
This repository has been archived by the owner on Feb 6, 2023. It is now read-only.

Commit

Permalink
Update QuickStart-API-Basics.md (#2491)
Browse files Browse the repository at this point in the history
Summary: Pull Request resolved: #2491

Reviewed By: elboman

Differential Revision: D22788091

Pulled By: mrkev

fbshipit-source-id: c83b95a355f0aecfaf6f5ed35a4fdde3b4fbe05a
  • Loading branch information
MichaelDeBoey authored and facebook-github-bot committed Jul 28, 2020
1 parent 3eb391e commit 170fe23
Showing 1 changed file with 23 additions and 30 deletions.
53 changes: 23 additions & 30 deletions docs/QuickStart-API-Basics.md
Original file line number Diff line number Diff line change
Expand Up @@ -19,20 +19,16 @@ As a brief refresher, controlled inputs involve two key pieces:
2. An _onChange_ prop function to receive updates to the input

This approach allows the component that composes the input to have strict
control over the state of the input, while still allowing updates to the DOM
to provide information about the text that the user has written.
control over the state of the input, while still allowing updates to the DOM to
provide information about the text that the user has written.

```js
class MyInput extends React.Component {
constructor(props) {
super(props);
this.state = {value: ''};
this.onChange = evt => this.setState({value: evt.target.value});
}
render() {
return <input value={this.state.value} onChange={this.onChange} />;
}
}
const MyInput = () => {
const [value, setValue] = useState('');
const onChange = (evt) => setValue(evt.target.value);

return <input value={value} onChange={onChange} />;
};
```

The top-level component can maintain control over the input state via this
Expand All @@ -42,13 +38,14 @@ The top-level component can maintain control over the input state via this

In a React rich text scenario, however, there are two clear problems:

1. A string of plaintext is insufficient to represent the complex state of a rich editor.
1. A string of plaintext is insufficient to represent the complex state of a
rich editor.
2. There is no such `onChange` event available for a ContentEditable element.

State is therefore represented as a single immutable
[EditorState](/docs/api-reference-editor-state) object, and
`onChange` is implemented within the `Editor` core to provide this state
value to the top level.
[EditorState](/docs/api-reference-editor-state) object, and `onChange` is
implemented within the `Editor` core to provide this state value to the top
level.

The `EditorState` object is a complete snapshot of the state of the editor,
including contents, cursor, and undo/redo history. All changes to content and
Expand All @@ -58,19 +55,15 @@ this remains efficient due to data persistence across immutable objects.
```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() {
return (
<Editor editorState={this.state.editorState} onChange={this.onChange} />
);
}
}
const MyInput = () => {
const [editorState, setEditorState] = useState(() =>
EditorState.createEmpty(),
);

return <Editor editorState={editorState} onChange={setEditorState} />;
};
```

For any edits or selection changes that occur in the editor DOM, your `onChange` handler will execute with the latest `EditorState` object based on those changes.
For any edits or selection changes that occur in the editor DOM, your `onChange`
handler will execute with the latest `EditorState` object based on those
changes.

0 comments on commit 170fe23

Please sign in to comment.