Draftjs中文翻译2 - API Basics API基础

API基础

本文档概述了DraftAPI 的基础知识。一个 可行的例子也可以沿用。

---

受控输入

该Editor阵营组件内置的控制CONTENTEDITABLE组件，以提供仿照熟悉反应的顶级API的目标 来控制输入 API。

作为简要回顾，受控投入涉及两个关键部分：

甲值来表示输入的状态
一个平变化支撑功能，接收更新的输入
此方法允许组成输入的组件严格控制输入的状态，同时允许更新DOM以提供有关用户编写的文本的信息。

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} />;
  }
}

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

---

控制富文本

但是，在React富文本场景中，有两个明显的问题：

一串明文不足以表示富编辑器的复杂状态。
onChangeContentEditable元素没有可用的事件。
状态因此被表示为一个单一的不可变的 EditorState对象，并 onChange在Editor内核中实现以将该状态值提供给顶层。

该EditorState对象是编辑器状态的完整快照，包括内容，光标和撤销/重做历史记录。编辑器中所有对内容和选择的更改都会创建新EditorState对象。请注意，由于跨不可变对象的数据持久性，此保持高效。

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} />;
  }
}

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

---

原文链接：https://draftjs.org/docs/quickstart-api-basics.html#content

各种翻译工具齐上，如有问题，请指正！