Reactjs 在我的React组件中使用TinyMCE时，状态中未显示更改

我试着用TinyMCE来表示反应和状态。我有你在下面看到的反应成分

加载时，它正在加载作为道具传入的初始文本

但是如果我更新了其中的任何一个，我在我放入render

console.log的console.log中就看不到任何更新（“此页面的labText:”，labText）

我正在尝试使用this.state将文本更改保存到state

还有什么我需要做的吗

谢谢

import React from 'react';
import { Editor } from '@tinymce/tinymce-react';

class App extends React.Component {

    constructor(props) {
        super(props);
        this.state = { text: '' };
    }

    handleEditorChange = (content, editor) => {
        console.log('Content was updated:', content);
        this.setState({ text: content });
    }

    render() {
        const { deptId, labText } = this.props;
        this.state
        console.log("DeptId for TinyMCE: ", deptId);
        console.log("labText fo this page: ", labText);
        return (
            <Editor
                initialValue={labText}
                init={{
                    height: 500,
                    menubar: false,
                    plugins: [
                        'advlist autolink lists link '
                    ],
                    toolbar:
                        'undo redo | formatselect | bold italic  | \
                        alignleft alignright alignjustify | \
                        removeformat | help |'
                }}
                onEditorChange={this.handleEditorChange}
            />
        );
    }
}

export default App;

从“React”导入React；
从'@tinymce/tinymce-react'导入{Editor}；
类应用程序扩展了React.Component{
建造师（道具）{
超级（道具）；
this.state={text:'}；
}
handleEditorChange=（内容、编辑器）=>{
console.log（'内容已更新：'，内容）；
this.setState（{text:content}）；
}
render（）{
const{deptId，labText}=this.props；
这个州
log（“DeptId代表TinyMCE:”，DeptId）；
log（“此页面的labText:”，labText）；
返回(
);
}
}
导出默认应用程序；
labText这是编辑器更改时唯一未更新的初始值。若要将编辑器用作受控组件，则应使用“值”属性

class App extends React.Component {
    constructor(props) {
        super(props);
        this.state = { text: '' };
    }

    handleEditorChange = (content, editor) => {
        console.log('Content was updated:', content);
        this.setState({ text: content });
    }

    render() {
        console.log("labText fo this page: ", this.state.text);
        return (
            <Editor
                init={{
                    height: 500,
                    menubar: false,
                    plugins: [
                        'advlist autolink lists link '
                    ],
                    toolbar:
                        'undo redo | formatselect | bold italic  | \
                        alignleft alignright alignjustify | \
                        removeformat | help |'
                }}
                value={this.state.text}
                onEditorChange={this.handleEditorChange}
            />
        );
    }
}

类应用程序扩展了React.Component{
建造师（道具）{
超级（道具）；
this.state={text:'}；
}
handleEditorChange=（内容、编辑器）=>{
console.log（'内容已更新：'，内容）；
this.setState（{text:content}）；
}
render（）{
log（“此页面的labText:”，this.state.text）；
返回(
);
}
}

您可以将值作为道具传递，但是如果您使用这种方法，您还应该传递来自处理值更改的父级的回调。
但是当我这样做时，React TinyMCE组件是空的，因为缺少它，
initialValue={labText}
您可以在
这个.state.text中设置一些内容，它将从一开始就显示出来。谢谢。。。我尝试在我的构造函数中添加
labText
，但是我得到一个错误，labText没有定义？所以我不知道怎么把它装进去there@SkyeBoniwell也许这个例子对你有帮助，我不需要两个类，但是你使用的是
props.labText
，所以我假设你有任何一种包装器组件，可以将props传递给孩子们，这个例子可以更好地帮助你。