单击时显示/隐藏 div

Question

我目前已经完成了切换操作，但我唯一需要的帮助是，我也想关闭 div，就像切换操作一样。我目前所做的就是，一旦我单击另一个 div 元素，已单击的前一个元素就会关闭，但我更希望在单击的 div 元素上有一个关闭和打开的切换操作，而不需要需要单击另一个来关闭前一个 div，我只抓取了代码中需要的部分，只是为了防止复制和粘贴整个文件，只是为了节省阅读时间。

代码片段

  const [posts, setPosts] = useState([]);
  const [commentState, commentChange] = useState({
    activeObject: null
  });

  const toggleComment = (index) => {
    commentChange({...commentState, activeObject: posts[index]})
  }

  const toggleActiveStyles = (index) => {
    if(posts[index] === commentState.activeObject) {
      return "dashboard__commentContent toggle";
    } else {
      return "dashboard__commentContent";
    }
  }


 return error ? (
    <span>{error}</span>
  ) : (
  
  {posts.map((post, i) => (
       <button onClick={() => toggleComment(i)} >toggle</button>


       <div className={toggleActiveStyles(i)}>
           <h1>{post.title}</h1>
       </div>
  )}

Answer 1

这是一个工作代码和框，您可以对其进行操作以满足您的需求。

说明

您需要跟踪 toggled div 并确保根据该情况调整您的课程。您可以过滤掉或添加到切换的 div 状态变量，并在渲染时执行任何您想要的操作。

代码

import { useState } from "react";
import "./styles.css";

const DATA = ["1", "2", "3", "4"];

export default function App() {
  const [closedDivs, setClosedDivs] = useState([]);

  const toggleDiv = (i) => {
    setClosedDivs((divs) =>
      divs.includes(i) ? divs.filter((d) => d !== i) : [...divs, i]
    );
  };

  return (
    <div className="App">
      {DATA.map((d, i) => (
        <div
          className={`${closedDivs.includes(i) ? "close" : ""} box`}
          onClick={() => toggleDiv(i)}
        >
          <p> {d} </p>
        </div>
      ))}
    </div>
  );
}

Answer 2

您可以通过条件和使用状态显示/隐藏元素：

//define usestate to keep show state
const [showState, setShowState] = useState(true)  

//function to change state of show/hide
const showState_Function = () => {
    setShowState(false)
}
return (
    <>
        //define condition for show/hide elements
        {showState &&
            <div>
                <h1>Welcome!</h1>
                <button onClick={showState_Function}>Hide</button>
            </div>

        }
    </>
)