我有以下反应结构(我在这篇文章中简化了它(:
<div>
<div>
<div
<AceEditor/>
</div>
</div>
<div>
<p/>
<hr/>
{items}
</div>
</div>
AceEditor 是从 react-ace
npm 包导入的,{items}
是一个大小不一的数组,从 this.state
中的数组创建。除了一件事:每次由于{items}
的变化(由于数组在this.state
的变化(而重新渲染此结构时,AceEditor 中的文本都会被重置。没有触发onChange事件,我似乎无法将问题追溯到其根源。
有谁知道导致问题的原因以及如何解决这个问题?
对状态的更改将导致 render 重新显示 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"
value={this.state.newValue}
editorProps={{$blockScrolling: true}}
/>,
document.getElementById('example')
);