>source

이전 페이지를 PHP에서 ReactJS로 다시 작성하고 있습니다. div를 숨기고 표시하는 데 문제가 있습니다.". tooltip-act"

을 클릭 한 후 div". tooltip"을 표시하고 싶습니다.

이전 jQuery를 사용하여 수행했지만 React에서 CSSTransition을 수행하는 가장 좋은 방법이라는 것을 알았습니다. 나는 그것을했지만 뭔가 잘못되었습니다.". tooltip-act"를 클릭하면". tooltip"이 표시되지만 시간 초과 길이에 대해서만 표시되고 사라집니다. 상태를 다시 false로 변경할 때까지 유지하려고합니다 (이 버튼을 아직 만들지 않았습니다). 휴식은 이미 자신의 차례를 기다리고 있기 때문에". tooltip t-umiej"만보십시오

내 반응 코드 :

import React, { useState } from 'react';
import { CSSTransition } from 'react-transition-group';
import avatar from './../../assets/images/avatar.png';
const getAge = birthDate => Math.floor((new Date() - new Date(birthDate).getTime()) / 3.15576e+10);
function Home(props) {
  const [showSkills, setShowSkills] = useState(false);
  const [showQuests, setShowQuests] = useState(false);
  const [showHistory, setShowHistory] = useState(false);
  const [showHobby, setShowHobby] = useState(false);
  return (
    <div>
      <div className="profil-okno">
        <span className="name">{props.dane.personalia.imie} {props.dane.personalia.nazwisko}</span>
        <div className="avatar-main">
          <img src={avatar} alt="avatar" />
        </div>
        <div className="staty">
          <ul>
            <li><label>Płeć: </label>{props.dane.personalia.plec}</li>
            <li><label>Rasa: </label>{props.dane.personalia.rasa}</li>
            <li><label>Klasa: </label>{props.dane.personalia.klasa}</li>
            <li><label>Poziom (wiek): </label>{getAge(props.dane.personalia.urodziny)}</li>
            <li><label>Charakter: </label>{props.dane.personalia.charakter}</li>
            <li><label>Lokalizacja: </label>{props.dane.personalia.lokalizacja}</li>
          </ul>
        </div>
      </div>
      <div className="odnosniki">
        <ul>
          <li>Umiejętności:<br /><span className="tooltip-act" onClick={() => setShowSkills(true)} >+ kliknij by rozwinąć</span></li>
          <li>Osiągnięcia:<br /><span className="tooltip-act" onClick={() => setShowQuests(true)} >+ kliknij by rozwinąć</span></li>
          <li>Historia:<br /><span className="tooltip-act" onClick={() => setShowHistory(true)} >+ kliknij by rozwinąć</span></li>
          <li>Hobby:<br /><span className="tooltip-act" onClick={() => setShowHobby(true)} >+ kliknij by rozwinąć</span></li>
          <span>{showSkills.toString()}</span>
        </ul>
      </div>
      <CSSTransition in={showSkills} timeout={2000} classNames="t-umiej">
        <div className="tooltip t-umiej">
          <ul>
            <li>HTML</li>
            <li>CSS</li>
            <li>jQuery</li>
            <li>Symfony</li>
            <li>PHP</li>
            <li>MySQL</li>
            <li>Git</li>
            <li>Administracja</li>
            <li>Grafika rastrowa</li>
            <li>Grafika wektorowa</li>
            <li>Język angielski</li>
            <li>Język niemiecki</li>
            <li>ReactJS</li>
          </ul>
          <p><a href="skills.php">+ WIĘCEJ</a></p>
          <span className="tooltip-hide">- kliknij by zwinąć</span>
        </div>
      </CSSTransition>
      {/* other tooltips */}
    </div>
  );
}
export default Home;

CSS (툴팁) :

.tooltip-act {
    display: block;
    width: 150px;
    margin: 0 auto;
    color: #777777;
    cursor: pointer;
}
.tooltip-hide {
    color: #777777;
    cursor: pointer;
}
.tooltip ul {
    margin-top: 0;
}
.tooltip li {
    list-style: circle;
}
.tooltip {
    position: absolute;
    display: none;
    min-width: 200px;
    text-align: left;
    border-style: solid;
   border-width: 45px 23px;
   -moz-border-image: url(../images/zwoj.png) 45 23 stretch;
   -webkit-border-image: url(../images/zwoj.png) 45 23 stretch;
   -o-border-image: url(../images/zwoj.png) 45 23 stretch;
   border-image: url(../images/zwoj.png) 45 23 fill stretch;
}
.t-umiej-enter {
    display: none;
}
.t-umiej-enter-active {
    display: block;
    transition: display 500ms;
}
.t-umiej-exit {
    display: block;
}
.t-umiej-exit-active {
    display: none;
    transition: display 500ms;
}

그리고 내 오래된 jQuery 작업 :

var tool="";
var licznik=0;
$(document).ready(function () {
    $(".tooltip-act").on("click", function (event) {
        if (licznik==0) {
            tool=$(this).attr("tool");
            $(tool).css("bottom", $(window).height() - event.pageY - 50).css("left", event.pageX - 20);
            $(tool).slideDown();
            licznik=1;
            return false;
        } else {
            $(tool).slideUp();
            licznik=0;
        }
    });
    $(".tooltip").on("click", function () {
        $(tool).slideUp();
        licznik=0;
    });
});

내가 잘못한 일과 해결 방법을 알려주십시오.

두 번째 질문은 내 이전 jQuery에 비슷한 효과를 얻는 가장 좋은 방법은 무엇입니까?

미리 감사합니다

  • 이전 r - 모든 데이터 프레임 조합을 반복하여 이들 사이에 기능을 적용
  • 다음 pandas - 객체를 날짜/시간 형식으로 변경