如何在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
    })
}