刷新特定的 DIV答案

【问题标题】：Refreshing specific DIV刷新特定的 DIV
【发布时间】：2019-11-16 21:41:29
【问题描述】：

我正在创建一个票务系统，有时票务内容太长，我只想显示其中的一部分（前 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）？

【问题讨论】：

您需要通过调用this.setState({ short_content: value })更新state
非常感谢！这解决了问题

标签： javascript html reactjs typescript

【解决方案1】：

您正在尝试在 React 中进行 DOM 操作。这几乎是从来没有正确的做事方式。

只需根据您是否要显示完整票证来切换状态变量，然后根据该状态进行渲染。

在 React 中，您不应该直接操作 DOM；相反，您操作您的数据，而您的组件对这些数据更改做出反应。

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 供您查看。

【讨论】：

【解决方案2】：

正如思想家所建议的（对原始帖子的评论），我应该改变： this.state.short_content=999; 转：this.setState({short_content:999});

【讨论】：

【解决方案3】：

您需要使用this.setState 更新状态。

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.setState({
      short_content: 999
    })
    full_txt!.innerHTML = full_content;
  } else {
    txt_swapper!.innerHTML = "Show More";
    this.setState({
      short_content: 172
    })
  }
}

希望对你有帮助:)

【讨论】：

如前所述，这解决了我的问题，非常感谢！

【解决方案4】：

const fullContent = 'your full content'; //Your original content
let displayContent = ''; //What you will show on the screen at a time

var showMore = false; //Are you showing right now or not

showMoreElement.addEventListener('click', function() {
if(!showMore) {
  showMore = true;
  displayContent = fullContent;
  showMoreElement.textContent = 'Show Less';
} else {
  showMore = false;
  displayContent = 'first 172 char of your content';
  showMoreElement.textContent = 'Show More';
}
});

这里发生了什么：

首先你有你的原创内容。然后，您创建一个变量，其中包含 172 个字符的内容或完整内容，具体取决于决定用户是否单击“显示更多”链接的 showMore 变量。您可以通过 Show More 按钮上的事件侦听器来控制它。希望对您有所帮助。

【讨论】：