入力を逆転させるDraft-jsエディタ

Question

複数のテキスト入力が必要なアプリケーションがあります。書式設定とカスタマイズのために私はdraft-jsをエディタとして選択しましたが、非常に厄介な入力問題が発生しました。

私がエディタに入力すると、最後に押されたキーがエディタの先頭に印刷され、入力全体が反転されます。つまり、常にキャレットがその行の最初のインデックスにあるかのようです。

私は3つのエディタを持っていますが、それぞれには1つのonChangeがあり、それは最新のエディタでreduxストアを更新します。contentStateページが再レンダリングされると、それぞれのエディタはcontentStateでレンダリングされ、EditorStateに変換されます。ここで

私のコードです：

main.js

render() { 

    /* Each Editor has a similar block as below */ 

    let coverEditorState = EditorState.createEmpty() 
    let coverContentState = _.get(data, 'details.message.cover.contentState') 

    if (typeof coverContentHTML != "undefined"){ 
     coverEditorState = EditorState.createWithContent(coverContentState) 
    } 

    return (
     ... 
     <Composer 
      editorState={coverEditorState} 
      onChange={this._handleCoveringLetterChange.bind(this)} 
     /> 
     ... 
    ) 
} 

Composer.js

class Composer extends Component { 
    constructor() { 
     super() 
     this.state = { editorState: EditorState.createEmpty(), styleMap: {} } 
    } 

    componentWillReceiveProps(nextProps) { 
     this.setState({ editorState: nextProps.editorState }) 
    } 

    onChange(editorState) { 

     let nextState = Object.assign({}, this.state, { editorState }) 

     let currentContentState = editorState.getCurrentContent() 

     let changeObject = { 
      contentState: currentContentState 
     } 

     this.setState(nextState) 
     this.props.onChange(changeObject) 
    } 

    render() { 
     return (
      <Editor 
       editorState={this.state.editorState} 
       onChange={this.onChange.bind(this)} 
      /> 
     ) 
    } 
} 

私はSelectionStateなどContentStateを返す試してみました2つを組み合わせて再レンダリングしますが、それはより多くの問題とエラー。

Answer 1

あなたが提供したコードは実際にはわかりませんが、変更するたびにEditorStateを（EditorState.createEmpty()またはEditorState.createWithContetnt()を使用して）再作成しているようです。それが唯一のコンテンツの復元だからそれは、動作しません - ないカーソルの位置、選択など

を、私は、それを解決してきた方法は、私が作成していることであるEditorStateのみ、すなわちそれはdoesnの場合は、一度tはすでに存在します。次に、変更ごとにEditorStateを通常とに更新し、contentStateをこの場合はデータベースに保存します。 ここで重要なのは、contentStateを使用して新しいEditorStateを作成しないことです。

EditorStateが次回存在しない場合は、EditorState.createWithContent(contentStateFromDB)を使用して初期化されます。

Answer 2

私はちょうど同様の問題にぶつかりました（そして解決しました）。

setStateへの呼び出しが実際には状態の更新をキューに入れており、this.props.onChangeの呼び出しの前に適用されていないためです。これはわかりやすくdraft.jsを投げたようです。

は変更してみてください：

this.setState(nextState) 
this.props.onChange(changeObject) 

へ：

this.setState(nextState,() => { 
    this.props.onChange(changeObject); 
}); 

これは、状態は親onChangeコールバックを呼び出す前に更新されるようになります。