我想要一个隐藏 div 并恢复它的按钮

Question

我想创建一个按钮来隐藏每张票和一个通用按钮来恢复它们。

这是代码：

return (
  <ul className="tickets">
    {filteredTickets.map((ticket) => (
      <li key={ticket.id} className="ticket">
        <h5 className="headline">{ticket.headline}</h5>
        <p className="text">{ticket.text}</p>
        <footer>
          <div className="data">
            By {ticket.address} | {new Date(ticket.time).toLocaleString()}
          </div>
        </footer>
      </li>
    ))}
  </ul>
);

Answer 1

这是您想要的示例！ 您必须将按钮的 myFunction() 和 myDIV 替换为要隐藏它的元素！

<button onclick="myFunction()">Click Me</button>

    function myFunction() {
      var x = document.getElementById("myDIV");
      if (x.style.display === "none") {
        x.style.display = "block";
      } else {
        x.style.display = "none";
      }
    }

对于反应 = const [可见，setVisible] = useState(true) 这是按钮 setVisible(!visible)}>隐藏/显示

Answer 2

这里有一个JS的demo，修改成你想要的样子

<ul class="ticket">
<li>
        <p>hey, I'm a P</p>
        <div class="data">I'm a Div</div>
      </li>
</ul>
.hide {display:none}

const generalBtn = document.getElementById(`btn`);
const divContainer = document.querySelector(`.ticket`);
const eachDiv = divContainer.getElementsByClassName(`data`);
generalBtn.addEventListener(`click`, () => {
  [...eachDiv].forEach((div) => {
    div.classList.toggle(`hide`);
  });
});

Answer 3

您的情况有一个很好的解决方案，但正如 cmets 中所述，它需要操作 filteredTickets 数组。

您需要为filteredTickets 的每个项目添加一个属性/值来跟踪或更改它们的状态。例如，它可以是 isVisible 属性，它是一个带有 false 或 true 值的布尔值。

现在，isVisible 值将决定行为。让我们修改票：

const handleHideTicket = (id) => {
  // find selected ticket and ​change its visibility
 ​const updatedFilterdTickets = filteredTikcets.map(ticket => (ticket.id === id ? {...ticket, isVisible: false} : ticket))
 // now the updatedFilterdTickets need to be set in your state or general state like redux or you need to send it to the server throw a API calling.
}


return (
 ​<ul className="tickets">
   ​{filteredTickets.filter(ticket => ticket.isVisible).map((ticket) => (
     ​<li key={ticket.id} className="ticket">
       ​<h5 className="headline">{ticket.headline}</h5>
       ​<p className="text">{ticket.text}</p>
       ​<footer>
         ​<div className="data">
           ​By {ticket.address} | {new Date(ticket.time).toLocaleString()}
         ​</div>
         // add a button to control visibility of each ticket
         ​<button onClick={() => handleHideTicket (ticket.id)}> click to hid / show </button>
       ​</footer>
     ​</li>
   ​))}
 ​</ul>
);

解释：

一个新的button 添加到每张票，并将handleHideTicket 处理程序传递给它。如果用户单击此按钮，处理程序会找到该票并将isVisible 属性设置为false。

另一方面，我们可以通过在map 方法之前应用一个简单的filter 方法来删​​除隐藏的票证。所以只会显示可见的门票。

现在，创建一个通用按钮来显示所有门票。在这种情况下，您需要一个处理函数，将所有票证的isVisible 值设置为true

const handleShowAllTickets = () => {
  const updatedFilteredTickets = filteredTickets.map(ticket => ({...ticket, isVisible: true}))
  // now put the updatedFilteredTickets in your general store/post an API call/ update state 
}

注意：正如我在代码的 cmets 中提到的，您需要在通过处理程序更改后更新您的 filteredTickets 数组以反映元素的更改。