时间戳

首页 > 解决方案 > 使用 React Hooks 的 SlateJS 工具栏

reactjs - 使用 React Hooks 的 SlateJS 工具栏

问题描述

我正在尝试使用 React Hooks 在 slate 上设置工具栏。好像出了什么问题，我不知道是什么。这是我的代码：

const renderMark = (props, editor, next) => {
  const { children, mark, attributes } = props
  switch (mark.type) {
    case "bold":
      return <strong {...attributes}>{children}</strong>
    case "italic":
      return <i {...attributes}>{children}</i>
    case "underline":
      return <u {...attributes}>{children}</u>
    default:
      return next()
  }
}

const onClickMark = (event, type, editor) => {
  event.preventDefault()
  editor.toggleMark(type)
}


<>
      <Toolbar>
        <Button onPointerDown={event => onClickMark(event, "bold")}>
          <BoldIcon />
        </Button>
        <Button onPointerDown={event => onClickMark(event, "italic")}>
          <ItalicIcon />
        </Button>
        <Button onPointerDown={event => onClickMark(event, "underline")}>
          <UnderlineIcon />
        </Button>
      </Toolbar>

      <Editor
        onChange={handleChange}
        onKeyDown={onKeyDown}
        renderMark={renderMark}
        renderNode={renderNode}
        value={value}
      />
    </>

知道为什么这不起作用吗？

标签： reactjsreact-hooksslatejs

解决方案

问题是我需要将工具栏绑定到编辑器。我useRef按如下方式使用钩子做到了这一点。

const editorRef = useRef()

const onClickMark = (event, type, editorRef) => {
  event.preventDefault()
  editorRef.current.toggleMark(type)
}

  return (
    <>
      <Toolbar>
        <Button onPointerDown={event => onClickMark(event, "bold", editorRef)}>
          <BoldIcon />
        </Button>
        ...
      </Toolbar>

      <StyledEditor
        ...
        ref={editorRef}
        ...
      />
    </>

推荐阅读