本文档提供了Draft API基础的概述。你也可以跟着可以运行的例子进行学习。

受控的输入

这个Editor React组件是作为一个受控的内容编辑的组件所构建的，我们的目标是提供一个顶级的API，它以我们熟悉的React受控输入API为模型。

简单的复习一下,受控输入符合以下两点:

  • 一个value属性代表了输入的状态
  • 一个onChange函数属性接收输入更新

这种方法允许拥有输入的组件能够严格控制输入的状态，同时仍然允许对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的富文本场景中,然而,会存在两个比较明显的问题:

  • 纯文本字符串不足以表示富编辑器的复杂状态。
  • 在ContentEditable节点中不存在onChange事件可以用。

因此,State代表了单一的immutable EditorState对象，并且 onChange 是在Editor组件核心中实现的，它将这个状态提供到顶层了。

这个EditorState对象是一个完整的 editor编辑器状态的快照，包括了contents(内容),cursor(游标),撤销(undo)/重做(redo) 历史. 所有针对编辑器内容和光标的改变都将重新创建出一个新的EditorState对象。值得注意的是，这依旧会十分高效，由于immutable对象具有的数据持久特性。

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

对于editor DOM中发生的任何编辑和光标选择更改，你的onChange处理程序将基于这些改变，计算和产生出最新的EditorState对象。