提问人:quickfeet 提问时间:10/3/2023 更新时间:10/3/2023 访问量:34
React Quill:UseState 钩子不会重新渲染“modules”属性
React Quill: UseState hook does not re-render "modules" property
问:
我正在努力在未选择“编辑器”列时隐藏文本编辑器标题菜单。 基本上,我尝试在调用 onFocus 时显示 modules1,在调用 onBlur 时显示 modules2。 我正在使用我认为我正确实现的 React useState() 钩子,但由于某种原因,当用户专注于文本编辑器时,编辑器无法正确呈现 modules1。
const modules1 = {
toolbar: [
[{ 'header': '1'}, {'header': '2'}, { 'font': [] }],
['bold', 'italic', 'underline'],
[{ 'color': [] }],
[{ 'background': [] }],
[{ 'list': 'ordered'}, { 'list': 'bullet' },]
],
clipboard: {
// toggle to add extra line breaks when pasting HTML:
matchVisual: false,
}
};
const modules2 = {
toolbar: false,
clipboard: {
// toggle to add extra line breaks when pasting HTML:
matchVisual: false,
}
};
const formats = [
'header', 'font', 'bold', 'italic', 'underline', 'color', 'background', 'list'
];
const RichTextEditorCell = ({ value, onValueChange }) => {
const [currentModule, setCurrentModule] = useState(modules2);
const handleFocus = () => {
setCurrentModule(modules1);
}
const handleBlur = () => {
setCurrentModule(modules2);
}
return(
<ReactQuill
value={value}
onChange={onValueChange}
modules={currentModule}
formats={formats}
theme="snow"
onKeyDown={(event) => {
event.stopPropagation();
}}
onFocus={handleFocus}
onBlur={handleBlur}
/>)
};
const columns = [
{
field: 'editor',
headerName: <Typography>Editor</Typography>,
sortable: false,
width: 500,
renderCell: (params) => (
<RichTextEditorCell
value={params.row.editor || ''}
onValueChange={(content) => {
params.row.editor=content;
}}
/>
),
},
];
我尝试使用检查工具进行调试。我验证了当用户单击编辑器时是否正确调用了 onBlur 和 onFocus。
答: 暂无答案
评论