如何在 Slatejs 中创建 Read_More 和 Read_less 按钮

问题描述

In this link 您可以找到 read_more/read_less 功能，但在 slatejs 中我们无法直接访问文本。那么，如何以 slatejs 的方式在 saltejs 中创建该功能。 我试图创建 use ref

  const dots = React.useRef<any>();
  const moreText = React.useRef<any>();
  const btnText = React.useRef<any>();

然后我是这样实现的

<span ref={dots}>...</span>
      <span ref={moreText}>
        <Editable
          readOnly={readOnly}
          renderElement={renderElement}
          renderLeaf={renderLeaf}
          placeholder="Enter some rich text…"
          spellCheck
          autoFocus
          onKeyDown={onKeyDown}
        />
      </span>
      <button
        onClick={() => {
          if (dots.current.style.display === "none") {
            dots.current.style.display = "inline";
            btnText.current.innerHTML = "Read less";
            moreText.current.style.display = "inline";
          } else {
            dots.current.style.display = "none";
            btnText.current.innerHTML = "Read more";
            moreText.current.style.display = "none";
          }
        }}
        ref={btnText}
      >
        Read more
      </button>

但它隐藏了所有文本。 但是，我认为我需要像 moreText.current.lenghth(300).appendSpan(span of ref={moreText})

那样做 sotmihng

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）