React Quill:UseState 钩子不会重新渲染“modules”属性

React Quill: UseState hook does not re-render "modules" property

提问人:quickfeet 提问时间:10/3/2023 更新时间:10/3/2023 访问量:34

问:

我正在努力在未选择“编辑器”列时隐藏文本编辑器标题菜单。 基本上,我尝试在调用 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。

react-hooks 反应-quill react-data-grid react-quilljs

评论


答: 暂无答案