Question

我试图让一个段落出现在鼠标坐标的位置，但是在1秒后会自毁。

$(function(){
var fadeDelay = 1000;
var fadeDuration = 1000;
$(document).click(function(e){
    var div = $('<div class="image-wrapper">')
        .css({
            "left": e.pageX + 'px',
            "top": e.pageY + 'px'
        })
        .append($('<img src="" alt="myimage" />'))
        .appendTo(document.body);

    setTimeout(function() {
        div.addClass('fade-out');           
        setTimeout(function() { div.remove(); }, fadeDuration);
    }, fadeDelay);
});
});

上面的代码来自a fiddle，它代表了我正在寻找的效果；但是，它使用jQuery-当我使用React时。

我尝试遵循以下线性过程：

1-在状态下，通过单击鼠标来切换布尔值

  playerAttack = () => {
    this.setState({ hasPlayerAttacked: true })
}

2-在函数中，当布尔值为true时，返回一个段落并将布尔值设置回false

renderDamageDealtParagraph = () => {
  if (this.state.hasPlayerAttacked) {
    return <p>{this.state.playerAttack}</p>;
    this.setState({ hasPlayerAttacked: false });
  }
};

但是，采用这种方法时，谬论太多了；主要的原因是，将布尔值重新设置为false时，呈现的段落立即消失（而不是在1000ms超时之后）。

在使用香草JS的ReactJS中实现链接小提琴之类的最佳等待时间是什么？

在此先感谢任何可能提供帮助的人。

Answer 1

您基本上可以执行以下操作：

具有跟踪鼠标位置x和y的状态，以及两个布尔值isShown和shouldHide来协调分散显示的div
点击时，将isShown设置为true来显示div，然后立即将setTimeout设置为隐藏，方法是将shouldHide翻转到{ {1}}
添加类后，该元素将消失并触发true事件，此时您可以通过将transitionend分别移至isShown和{{1 }}为错误的布尔值

示例实现（对不起的代码，自从我发表评论以来已经很久了）

JS Fiddle

false

如何在React中的鼠标位置渲染自毁段落？

1 个答案: