Добавить кнопку читать далее в строку html реагировать - PullRequest
Новая
       99

Добавить кнопку читать далее в строку html реагировать

0 голосов
/ 30 января 2020

Я получаю сообщения из API и получаю содержимое сообщения в виде строки HTML, и мне нужно показать кнопку «Читать далее», если содержание превышает 1000 символов.

Вот пример текста.

enter image description here

Как мне это сделать?

Ответы [ 3 ]

1 голос
/ 30 января 2020

Здесь с версией Typescript. Используйте это как <SmartText text={'what ever'} length={30} />. длина является лимитом для показа ссылки «Подробнее». 

import React, { useState } from "react";

interface Props {
  text: string;
  length?: number;
}

const SmartText = ({ text, length = 20 }: Props) => {
  const [showLess, setShowLess] = useState(true);

  if (text.length < length) {
    return <p>{text}</p>;
  }

  return (
    <p>
      {showLess ? `${text.slice(0, length)}...` : text}
      <a onClick={() => setShowLess(!showLess)}>
        &nbsp;View {showLess ? "More" : "Less"}
      </a>
    </p>
  );
};

export default SmartText;
0 голосов
/ 30 января 2020

Вы можете запустить этот фрагмент кода. 

const fullText = "Living valley had silent eat merits esteem bed. In last an or went wise as left. Visited civilly am demesne so colonel he calling. So unreserved do interested increasing sentiments. Vanity day giving points within six not law. Few impression difficulty his use has comparison decisively. Not far stuff she think the jokes. Going as by do known noise he wrote round leave. Warmly put branch people narrow see. Winding its waiting yet parlors married own feeling. Marry fruit do spite jokes an times. Whether at it unknown warrant herself winding if. Him same none name sake had post love. An busy feel form hand am up help. Parties it brother amongst an fortune of. Twenty behind wicket why age now itself ten."

function showMore(){
  document.getElementById('text-body').innerHTML =  fullText;
  document.getElementById('btn-show-less').style="display:block";
  document.getElementById('btn-show-more').style="display:none";
}

function showLess(){
  document.getElementById('text-body').innerHTML = "partial text..." 
  document.getElementById('btn-show-more').style="display:block";
  document.getElementById('btn-show-less').style="display:none";
}
<div id="text-body">
  partial text...
</div>
<button id="btn-show-more" onClick='showMore()'>read more</button>
<button id="btn-show-less" style="display:none" onClick='showLess()'>show less</button>
0 голосов
/ 30 января 2020

Я надеюсь, что это работает для вас 

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
#more {display: none;}
</style>
</head>
<body>

<h2>Read More Read Less Button</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas vitae scel<span id="dots">...</span><span id="more">erisque 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.</span></p>
<button onclick="myFunction()" id="myBtn">Read more</button>

<script>
function myFunction() {
  var dots = document.getElementById("dots");
  var moreText = document.getElementById("more");
  var btnText = document.getElementById("myBtn");

  if (dots.style.display === "none") {
    dots.style.display = "inline";
    btnText.innerHTML = "Read more"; 
    moreText.style.display = "none";
  } else {
    dots.style.display = "none";
    btnText.innerHTML = "Read less"; 
    moreText.style.display = "inline";
  }
}
</script>

</body>
</html>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...