如何更新 reactjs 中的状态？

Question

最初我有一个 CKeditor 组件，从那里我有一个状态变量 editorContent

 <CKEditor id="currentCKEditor" activeClass="editor" key={this.state.editorContent} content={this.state.editorContent} events={{ "change": this.onChange, "instanceReady": this.ckeditorInstanceReady }} />

在渲染组件时，editorContent 来自于 templatestoreChange。

_templateStoreChange(type) {

    if (type == 'SingleTemplate') {
        let singletemplate = TemplateStore._getSingleTemplate() || {};
        console.log("single template response", singletemplate);
        this.setState({ editorContent: singletemplate.template.html });
    }
}

在此处调用 templateStoreChange logSig 后，editorContent 会发生变化。

  logSig = () => {
   const signaturedata = this.signaturePad.toDataURL();

    let elem= '<img alt src=' + signaturedata + ' />';
    this.setState({
        openSignatureDialog: false,
        editorContent:elem
    })
    console.log("signaturedata", signaturedata);

}`enter code here`

我需要更新状态，而不是删除整个状态并更改为新状态。

Answer 1

您仅将 elem 变量分配给 editorContent 并丢失了之前创建的全部内容。

解决方案是将elem 变量连接到现有状态。

logSig = () => {
    const signaturedata = this.signaturePad.toDataURL();

    let elem = '<img alt src=' + signaturedata + ' />';
    this.setState({
        openSignatureDialog: false,
        editorContent: this.state.editorContent + elem
    })
}