Draft 文件翻譯 - 快速開始 - 基礎API

基礎API

本文件概述了Draft API的基礎知識。 一個工作的例子也可以跟隨。

受控輸入

React元件 Editor 構建為受控的ContentEditable元件，
其目標是提供一個基於熟悉的React控制輸入API建模的頂級API。

作為一個簡短的回顧，控制輸入涉及兩個關鍵因素：

1.用於表示輸入狀態的值
2.一個onChange支援功能來接收輸入的更新

這種方法允許構成輸入的元件對輸入的狀態進行嚴格的控制，
同時仍然允許對DOM的更新來提供關於使用者所寫的文字的資訊。

class MyInput extends React.Component {
    constructor(props) {
        super(props);
        this.state = {value: ''};
        this.onChange = (evt) => this.setState({value: evt.target.value})
    }

    render() {
        return 
    }
}

頂級元件可以透過該值state屬性來保持對輸入狀態的控制。

控制富文字

在“富文字”案例中，有兩個明確的問題：

1. 一串純文字不足以表示豐富的編輯器的複雜狀態。
2. 一個 onChange prop function 用於接收輸入的更新

State因此被表示為一個不可變的EditorState物件，並且onChange在Editor內部實現，
以將該狀態值提供給頂層。
（state儲存的富文字內容是以物件的形式組織的。 ）

import {Editor， EditorState} from 'draft-js';

class MyEditor extends React.Component {
    constructor(porps) {
        super(props);
        this.state = {editorState: EditorState.createEmpty()};
        this.onChange = (editorState) => this.setState({editorState});
    }
    render() {
        return 
    }
}

對於在編輯器DOM中發生的任何編輯或選擇更改，您的onChange處理程式將根據這些更改執行最新的EditorState物件。