1

convertToRaw を使用してコンテンツを DB に保存しました。それを draft.js エディタにロードして、ユーザーがコンテンツを再編集できるようにしようとしています。

draft.js エディターは、ユーザーがコンテンツの「編集」をクリックすると表示される、react-modalベースのコンポーネント内に含まれています。モーダル (およびエディター) は再インスタンス化されず、表示および非表示されるだけなので、これは重要です。

エディターは、(ES6) クラス コンストラクターで次のように使用して 1 回だけ開始されます。

this.state = {editorState: EditorState.createEmpty()}

ユーザーが「編集」をクリックすると、DB から生のコンテンツが読み込まれます。次に、次のさまざまなバリエーションを使用して、生のコンテンツをエディターに読み込んでみました。

const contentState = convertFromRaw(rawContent)
const newEditorState = EditorState.push(this.state.editorState, contentState);
this.setState({editorState: newEditorState})

しかし、newEditorState には明らかに正しいコンテンツが含まれていますthis.setState({editorState: newEditorState})が、コンポーネント (またはエディター) の状態にはまったく影響を与えないようです。

エディターの新しい状態を設定するにはどうすればよいですか? ありがとう！

更新this.setState({editorState: newEditorState})さらに調査すると、エディターコンポーネントだけで失敗しているの は明らかです。

テスト状態プロパティを設定して正常に更新することでテストしましたが、editorState は変更されません。

これを完全にテストするために、コンストラクターで次を使用してテスト値で状態を初期化しました。

this.state = { 
    editorState:EditorState.createWithContent(ContentState.createFromText('Hello')),
    testVal: 'Test Val 1'
}

次に、setState がテスト値に対してどのように機能するかを示すテスト コードをいくつか作成しましたが、draft.js の editorState に対しては機能しません。

const newEditorState = EditorState.createWithContent(ContentState.createFromText('Goodbye'))
console.log('Before setState')
console.log('newEditorState: ' + newEditorState.getCurrentContent().getPlainText());
console.log('editorState: ' + this.state.editorState.getCurrentContent().getPlainText());
console.log('testVal: ' + this.state.testVal);

this.setState({editorState: newEditorState, testVal: 'Test Val 2'}, function(){
    console.log('After setState')
    console.log('editorState: ' + this.state.editorState.getCurrentContent().getPlainText());
    console.log('testVal: ' + this.state.testVal);
});

コンソール出力は次のようになります。

Before setState
    newEditorState: Goodbye
    editorState: Hello
    testVal: Test Val 1
After setState
    editorState: Hello
    testVal: Test Val 2

testVal が更新されているときに、draft.js の editorState が更新されない理由がわかりません。

4

2 に答える 2

2

わかりました。問題の原因がわかりました。

を呼び出そうとした直後にエディターにフォーカスを設定していましたsetState()。

つまり、setState を試行する前に呼び出しをfocus()移動することにより、エディターを呼び出していましたが、すべて機能しました。明らかにフォーカスを受け入れると、editorState に影響があります。focus()

于 2016-08-02T13:48:09.293 に答える