时间戳

首页 > 解决方案 > 在我的 React 组件中使用 TinyMCE 时更改未显示在状态中

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

问题描述

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

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

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

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

标签： reactjstinymcereact-component

解决方案

labText 它只是编辑器更改时不更新的初始值。如果要将编辑器用作受控组件，则应使用 value 属性。

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}
            />
        );
    }
}

您可以将值作为道具传递，但如果您使用这种方法，您还应该从处理值更改的父级传递回调。

推荐阅读