>source

처음에는이 code가 지저분하다는 것을 알고 있습니다. 복사하고 싶은 div가 있는데 div를 클릭하면 Content가 열리고 해당 div가 복사됩니다. 내가 달성 할 수없는 것은 이것이다. div /Image의 복사 된 버전에서, 나는 일반 것과 같은 토글 기능을 갖고 싶다. 완전히 이해하지 못한다면 여기에 샌드 박스가 있습니다. https://codesandbox.io/s/epic-bassi-ogzjq. 감사합니다


const data= [
{
  id:1,
  img:"./images/icons/folder.png",
  name:"Small Projects"
}
]
function App() {
  const [isProjectOpen, setIsProjectOpen]= useState(false)
  const project= useRef(null)
  const [smallProject, setSmallProject]=useState()
  const [active, setActive]= useState()
  const closeProject= ()=>{
    setIsProjectOpen(false)
  }
  const proj= data.find(projects=> projects.id===smallProject)
  const handleProject=(e)=>{
    if(project.current &
&
 !project.current.contains(e.target)){
      closeProject()
    }
  }
  useEffect(()=>{
    document.addEventListener('click', handleProject)
    return()=>{
      document.removeEventListener('click', handleProject)
    }
  },[])
  return (
    <>      <Taskbar/>      <WindowsIcons />      <Info />      {data.map((projects)=>{
        return(
          <>           {active=== project.id &amp;
&amp;
 (
            <div
               onClick={()=>setIsProjectOpen(!isProjectOpen)}
               className='smallProject__container'
               key={projects.id}
               ref={project}   >            <img
               onClick={()=>setSmallProject(projects.id)}
               className="smallProject__img"
               src={projects.img}/>            <h4
               onClick={()=>setSmallProject(projects.id)}
              >{projects.name} </h4>               {isProjectOpen ? <SmallProject /> :null}
            </div>)}
           </>             )
             })}
            {smallProject &amp;
&amp;
 (
           <div
             onClick={()=>setIsProjectOpen(!isProjectOpen)}
             className={"smallProjects__container " + ((isProjectOpen) ? "active": "")} >          <img
            classsName='copy__img'
            src={proj.img}/>            </div>             )}
    </>  );
}
export default App;

복사하려는 div와 보존하려는 토글 기능이 명확하지 않습니다.

codemonkey2021-03-01 08:45:05

복사 된 div에서 토글 기능을 갖고 싶습니다.

mura12021-03-01 08:45:05

@codemonkey 복사 한 div를 누르면 Small Project 구성 요소를 열거 나 닫고 싶습니다.

mura12021-03-01 08:45:05

프로젝트 잠금 버튼을 클릭하면 오른쪽에있는 작은 프로젝트 부분이 오른쪽에 표시 /숨기기를 원하십니까? 클릭-표시, 다시 클릭-숨기기?

codemonkey2021-03-01 08:45:05

트윗 담아 가기

mura12021-03-01 08:45:05
  • 이전 reactjs : laravel8 fortify, sanctum api 데이터를 가져오고 소품으로 반응 표시
  • 다음 swiftui : 핀을 사용하여 좌표를 MapView로 전송