使用 mui-rte 进行聊天消息输入时如何将内部状态设置为空字符串答案

【问题标题】：How to set the internal state to an empty string when using mui-rte for a chat message input使用 mui-rte 进行聊天消息输入时如何将内部状态设置为空字符串
【发布时间】：2019-12-27 14:06:16
【问题描述】：

我正在使用 mui-rte，它是一个不错的 Material-ui 包装器，围绕 Draftjs：

https://github.com/niuware/mui-rte.git

我想使用 MUIRichTextEditor 作为网络聊天客户端的输入字段。在点击发送按钮后，我遇到了如何将内部状态设置为空字符串的障碍。 RTE 编辑器组件如下所示：

import React, {useState, useEffect} from "react";
import MUIRichTextEditor from "mui-rte";
import {convertToRaw, EditorState} from 'draft-js'
import {stateFromMarkdown} from "draft-js-import-markdown";
import { ThemeProvider } from '@material-ui/styles';
import { createMuiTheme, useTheme} from '@material-ui/core/styles';

const local_theme_overrides = {
    overrides: {
        MUIRichTextEditor: {
            root: {
                marginTop: 20,
                width: "80%"
            },
            editor: {
                border: "1px solid gray",
                borderRadius: 4
            }
        }
    }
};

export default function RichTextEditor(props)
{
    const { initialValue, onChange, ...rest } = props;
    const [initial, setInitial] = useState('');

    useEffect(() => {
        const init_state = EditorState.createWithContent(stateFromMarkdown(initialValue));
        setInitial(JSON.stringify(convertToRaw(init_state.getCurrentContent())));
        onChange(init_state);
    }, []);

    const theme = useTheme();
    const [localTheme, setLocalTheme] = useState(theme);

    useEffect(() => {
        setLocalTheme(Object.assign({...theme}, local_theme_overrides));
    }, []);

    return (
        <ThemeProvider theme={localTheme}>
            <MUIRichTextEditor
                onChange={onChange}
                value={initial}
                {...rest}
            >
            </MUIRichTextEditor>
        </ThemeProvider>
    );
}

父级使用这样的字段：

const [message_content, setMessageContent] = useState('');

function sendMessage() {
    if (message_content === '')
        return;
    let rte_markdown = stateToMarkdown(message_content.getCurrentContent());
    channel.sendMessage(rte_markdown);
    // I would like to reset or re-render the mui-tre component after sending the message
    //setMessageContent('');
}

.....
<RichTextEditor
    label={"Write a message to " + name}
    initialValue={''}
    onChange={data => setMessageContent(data)}
    placeholder={"Write a message to " + name}
    controls={[]}
/>

<Button
        autoFocus
        onClick={() => sendMessage()}
        disabled={message_content === ''}
>
     Send
</Button>

当按下发送按钮时，消息会传递到聊天频道，但我无法重新设置或强制重新渲染 RTE 组件。关于如何做到这一点的任何想法？

【问题讨论】：

标签： reactjs react-hooks draftjs rte

【解决方案1】：

您可以将 MUI 文本编辑器的 value 属性设置为空内容状态。状态必须是字符串化和原始的。

一种方法是从 draft-js 库（mui-rte 是基于该库）导入 EditorState 对象和 convertToRaw 方法：

import { EditorState, convertToRaw } from 'draft-js'

const emptyContentState = JSON.stringify(
    convertToRaw(EditorState.createEmpty().getCurrentContent())

<MUIRichTextEditor value={emptyContentState} />

【讨论】：