我正在创建一个票务系统,有时票务内容太长,我只想显示其中的一部分(前 172 个字符) - 我这样做没有真正的问题,以查看完整的内容(同时页面)我正在创建 href
用于切换文本(显示更多/更少),并且我想显示完整内容或仅部分内容。
但是我找不到办法。 现在,当我提取票证数据时,我将其显示如下:
{ticket.content.length !==0? <div id='content' className='meta-data'>{ticket.content.substr(0, this.state.short_content)}</div> : null}
后面是:
<div id='showing' onClick={this.showMore} className={ticket.id}>Show More</div>
功能:
showMore = () => {
var txt_swapper = document.getElementById("showing");
var full_txt = document.getElementById("content");
var full_content = full_txt!.innerHTML;
if (txt_swapper!.innerHTML === "Show More") {
txt_swapper!.innerHTML = "Show Less";
this.state.short_content=999;
full_txt!.innerHTML=full_content;
} else {
txt_swapper!.innerHTML = "Show More";
this.state.short_content=172;
}
}
我尝试遵循这里的一些指南,但所有指南都发送到 JQuery,我认为我不需要使用它。 如何使用 javascript typescript 或 HTML 刷新特定 DIV(或更准确地说是我的“内容”DIV)?
最佳答案
您正在尝试在 React 中进行 DOM 操作。这几乎从来都不是正确的做事方式。
只需根据您是否想要显示完整的票证切换状态变量,然后根据该状态进行渲染。
在 React 中,你不应该直接操作 DOM;相反,您操纵数据,并且您的组件对这些数据更改使用react。
function Ticket({ content, truncateLength }) {
const [showFull, setShowFull] = React.useState(false);
const toggleText = showFull ? "Show Less" : "Show More";
const visibleContent = showFull ? content : content.substr(0, truncateLength);
return (
<div ticket>
<p>{visibleContent}</p>
<span
style={{ textDecoration: "underline", cursor: "pointer" }}
onClick={() => setShowFull(!showFull)}
>
{toggleText}
</span>
</div>
);
}
Here's a sandbox link让您看到它的实际效果。
关于javascript - 刷新特定DIV,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/58895466/