エースエディタがレンダリング反応

Question

I持って反応し、下記の構造（私はこの記事のためにそれを単純化）：

<div> 
    <div> 
     <div 
      <AceEditor/> 
     </div> 
    </div> 
    <div> 
     <p/> 
     <hr/> 
     {items} 
    </div> 
</div> 

AceEditorが react-ace NPMパッケージからインポートされ、 {items}から作成した、様々なサイズの配列です

配列はthis.stateです。 すべてのことは、1つのことを除いて動作します。の配列が変更されているため、{items}の変更によってこの構造がレンダリングされるたびに、AceEditorのテキストがリセットされます。 onChangeイベントは発生せず、問題の原因をその根底まで追跡することはできません。

誰でも問題の原因とその解決方法を知っていますか？

Answer 1

状態を変更すると、レンダリングによってDOMが再表示され、状態が更新されるたびに変更が消去されます。

ほとんどの場合、AceEditorの状態を状態に保存する必要があります。そのため、DOMが再レンダリングされたときに再表示されます。

function onChange(newValue) { 
    // store this value in state!! 
    this.setState({ newValue: newValue}); 
} 

// Render editor 
render(
    <AceEditor 
    mode="java" 
    theme="github" 
    onChange={onChange} 
    name="UNIQUE_ID_OF_DIV" 
    defaultValue={this.state.newValue} 
    editorProps={{$blockScrolling: true}} 
    />, 
    document.getElementById('example') 
);