id: quickstart-api-basics

title: API基础

本文档概述了Draft API 的基础。 也可以使用一个工作示例。

受控输入

Editor React组件构建为受控的ContentEditable组件，目的是提供以熟悉的React受控输入API为模型的顶级API。

作为简短的回顾，受控输入涉及两个关键部分：

  1. 代表输入状态的值
  2. 一个onChange prop函数，用于接收输入的更新

这种方法允许组成输入的组件对输入的状态进行严格控制，同时仍允许对DOM进行更新以提供有关用户编写的文本的信息。

  1. class MyInput extends React.Component {
  2.   constructor(props) {
  3.     super(props);
  4.     this.state = {value: ''};
  5.     this.onChange = evt => this.setState({value: evt.target.value});
  6.   }
  7.   render() {
  8.     return <input value={this.state.value} onChange={this.onChange} />;
  9.   }
  10. }

顶层组件可以通过此value状态属性维持对输入状态的控制 。

控制富文本

但是，在React RTF场景中，存在两个明显的问题：

  1. 纯文本字符串不足以表示富编辑器的复杂状态。
  2. 没有这样的onChange事件可用于ContentEditable元素

因此，状态表示为单个不可变的EditorState对象，并且onChange在Editor核心内实现，以将该状态值提供给顶层。

EditorState对象是编辑器状态的完整快照，包括内容，光标和撤消/重做历史。 编辑器中对内容和选择的所有更改将创建新的EditorState对象。 注意，由于跨不可变对象的数据持久性，这仍然有效。

  1. import {Editor, EditorState} from 'draft-js';
  3. class MyEditor extends React.Component {
  4.   constructor(props) {
  5.     super(props);
  6.     this.state = {editorState: EditorState.createEmpty()};
  7.     this.onChange = editorState => this.setState({editorState});
  8.   }
  10.   render() {
  11.     return (
  12.       <Editor editorState={this.state.editorState} onChange={this.onChange} />
  13.     );
  14.   }
  15. }

对于编辑器DOM中发生的任何编辑或选择更改，您的onChange处理程序将EditorState根据这些更改对最新对象执行。