reactjs - 使用 mui-rte 进行聊天消息输入时如何将内部状态设置为空字符串
问题描述
我正在使用 mui-rte,它是一个很好的关于 Draftjs 的 Material-ui 包装器:
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 组件。关于如何做到这一点的任何想法?
解决方案
您可以将value
MUI 文本编辑器的属性设置为空内容状态。状态必须是字符串化的和原始的。
一种方法是从 Draft-js 库(构建 mui-rte)中导入 EditorState 对象和 convertToRaw 方法:
import { EditorState, convertToRaw } from 'draft-js'
const emptyContentState = JSON.stringify(
convertToRaw(EditorState.createEmpty().getCurrentContent())
<MUIRichTextEditor value={emptyContentState} />
推荐阅读
- if-statement - 合并来自不同工作表的数据,但用给定变量替换内容
- continuous-integration - 即使我的 CI 构建 public/ 文件夹成功运行,自托管 GitLab 页面也不会显示在设置页面
- python - 在 python 中检查存在并从数据结构中获取随机元素的最快方法是什么?
- reactjs - 使用 React 和 Flask 进行 Web 应用程序身份验证
- apache-spark - EMR 火花不尊重执行者配置的数量
- python - sklearn ImportError:无法导入名称 plot_roc_curve
- angularjs - 角度参数 $routeParams 和 http.get params 方法不起作用
- ios - 由于 iOS 13.3.1 上的订阅应用内购买错误,Apple 拒绝
- javascript - 咕哝服务不起作用。因为 injector.sass 不见了?
- python - 在 conda 环境中隐藏包(不删除)