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

Question

我正在尝试将 TinyMCE 与 React 和 State 结合使用。我有你在下面看到的 React 组件。

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

但是如果我更新其中的任何一个，我将永远不会在我放入渲染 console.log("labText fo this page: ", labText);.

的 console.log 中看到任何更新

我正在尝试使用 this.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;

Answer 1

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 组件中使用 TinyMCE 时更改未显示在状态中

changes not showing up in state when using TinyMCE in my React Component

tinymce

reactjs

react-component