React js 应用程序-折叠阅读更多-阅读更少按钮需要双击

Question

我有这个问题，我需要单击一个按钮两次才能在 div 中显示更多或更少的文本内容。 网上有几个非常相似的问题，但我找不到我的例子的答案，因此我需要一些社区支持。

我遵循的示例如下所示：https://www.youtube.com/watch?v=2wQxF7gTcFo&t=173s 出于某种原因，这个人似乎只需要点击一次，我不确定我做错了什么......

以下是我为在网站上实现此功能而编写的部分代码。

js代码

function ReadMoreLess() {
    let more = document.querySelectorAll('.more');
    for (let i = 0; i < more.length; i++) {
      more[i].addEventListener('click',function(){
        more[i].parentNode.classList.toggle('active')
      })
    }
  }

html 代码 - 在 return() 内

<div className="containerNFT">
  <div className="card">
     <div className="content">
        <h3>Read More or Less</h3>
        <p>
        Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text 
        Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text 
        Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text  
        Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text 
        </p>
    </div>
    <button type="button" onClick={ReadMoreLess} className="more" title="Read"></button>
  </div>
</div>

CSS代码

.containerNFT {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  /*border: 1px solid black;*/
  margin-left: 50px;
}

.containerNFT .card {
  position: relative;
  width: 600px;
  padding: 11px;
  margin: 11px;
  border: 20px solid #fff;
}

.containerNFT .card::before {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  border: 20px solid transparent;
  border-top: 20px solid #0066FF;
  border-right: 20px solid #0066FF;
}

.containerNFT .card.active::before {
  border-top: 20px solid #0133FF;
  border-right: 20px solid #0133FF;
}

.containerNFT .card .content {
  position: relative;
  height: 225px;
  overflow: hidden;
}

.containerNFT .card.active .content {
  height: auto;
}

.containerNFT .card .content::before {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100px;
  background: linear-gradient(transparent, #fff);
}

.containerNFT .card.active .content::before {
  display: none;
}

.containerNFT .card .content h3 {
  font-size: 0.75em;
  font-weight: 600;
  margin-bottom: 10px;
}

.containerNFT .card .content p {
  font-weight: 300;
}

.more {
  border-color: #0066FF;
}

.containerNFT .card .more {
  position: relative;
  padding: 10px 15px;
  background: #0066FF;
  border-radius: 8px;
  margin-top: 15px;
  display: inline-block;
  cursor: pointer;
  text-transform: uppercase;
  font-weight: 500;
  letter-spacing: 2px;
  font-size: 14px;
  color: #fff;
}

.containerNFT .card.active .more {
  background: #0133FF;
}

.containerNFT .card .more::before {
  content: 'Read more';
}

.containerNFT .card.active .more::before {
  content: 'Read less';
}

我觉得这个 css 的编写方式使事情变得过于复杂，但我也找不到一个像样的例子来说明如何使用 useState 钩子部分隐藏文本（透明）。这就是为什么，现在，我想坚持这个 css。

这是最终目标：

非常感谢所有反馈和帮助。谢谢你。

Answer 1

在 ReactJS 应用程序中，使用 React 状态执行此操作会更好、更简洁：

const MyBlock = () => {
  const [readMore, setReadMore] = React.useState(false);

  const toggleReadMore = () => {
    setReadMore(!readMore);
  };
  return (
    <div className="containerNFT">
      <div className={`card${readMore ? ' active' : ''}`}>
        <div className="content">
          <h3>Read More or Less</h3>
          <p>
            Text Text Text Text Text Text Text Text Text Text Text Text Text
            Text Text Text Text Text Text Text Text Text Text Text Text Text
            Text Text Text Text Text Text Text Text Text Text Text Text Text
            Text Text Text Text Text Text Text Text Text Text Text Text Text
            Text Text Text Text Text Text Text Text Text Text Text Text Text
            Text Text Text Text Text Text Text
          </p>
        </div>
        <button
          type="button"
          onClick={toggleReadMore}
          className="more"
          title="Read"
        >
          {readMore ? 'Read Less' : 'Read More'}
        </button>
      </div>
    </div>
  );
};