reactjs - 如何在 Slatejs 中创建 Read_More 和 Read_less 按钮
问题描述
在此链接中,您可以找到 read_more/read_less 功能,但在 slatejs 中,我们无法直接访问文本。那么,如何以 slatejs 的方式在 saltejs 中创建该功能。我试图创建使用 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})
解决方案
这是工作应用程序:Stackblitz
import React, { useState } from "react";
import "./style.css";
const article = {
title: "Read More Read Less Button",
disc:
"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida venenatis. Integer fringilla congue eros non fermentum. Sed dapibus pulvinar nibh tempor porta."
};
export default function App() {
const [show, setShow] = useState(false);
return (
<div>
<h1>{article.title}</h1>
<p>{show ? article.disc : article.disc.substr(0, 100) + "..."}</p>
<button onClick={() => setShow(!show)}>
{!show ? "Read More" : "Read Less"}
</button>
</div>
);
}
推荐阅读
- rabbitmq - MassTransit/Rabbit MQ 版本兼容性
- java - 第一个 hello world java 程序可以在 Eclipse 中运行,但不能在命令提示符下运行
- proguard - proguard+springboot 插件 -> jar 中没有类
- postgresql - Postgres 数据库:如何为多个属性建模,这些属性也可以有多个值,并且与其他两个实体有关系
- azure - Azure DevOps 不会从 ZIP Deploy 发布 Web 应用程序,而是将其作为只读 ZIP 包运行
- r - R中字符串向量的循环函数
- jquery - 单击时折叠的菜单不会关闭
- reactjs - 将 gatsby react 字体真棒图标从 4 升级到 5,现在社交图标不起作用
- python - 如何分配给熊猫切片
- python-3.x - 在课堂上使用 pytest 固定装置