Javascript 如何在React中的鼠标位置呈现自毁段落？

我试图让一个段落出现在鼠标坐标的位置，但在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);
});
});

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

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

renderdamagedealtragraph=（）=>{
if（this.state.hasplayerated）{
返回{this.state.playerAttack}
；
this.setState（{hasPlayerAttacked:false}）；
}
};

但是,这种做法谬误太多,；主要的一点是，在将布尔值重置为false时，渲染的段落立即消失（而不是在1000毫秒的超时之后）

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

---

提前感谢可能提供帮助的人。

您基本上可以这样做：

具有跟踪鼠标位置的状态

x

和

y

，两个布尔值

显示为
和
应隐藏
，以协调消失div

单击后，通过将

isShown

设置为

true

来显示div，并立即

setTimeout

通过将

shouldHide

翻转为

true

添加一个类来开始隐藏它

添加类后，元素将淡出并触发

transitionend

事件，此时您可以通过将

isShown

翻转到

false

和

shouldHide

翻转到false布尔值来完全删除div

示例实现（很抱歉代码太糟糕，我已经有一段时间没有反应了）

---

class SelfDestructDemo扩展了React.Component{
建造师（道具）{
超级（道具）；
此.state={
x:0,，
y:0，
伊肖恩：错，
应该隐藏：错误
};
this.handleClick=this.handleClick.bind（this）；
this.reset=this.reset.bind（this）；
}
重置（）{
这是我的国家({
x:0,，
y:0，
伊肖恩：错，
应该隐藏：错误
});
}
handleClick（事件）{
if（this.state.isShown）{
返回；
}
const{clientX，clientY}=event；
这是我的国家({
x:clientX，
y:clientY，
伊肖恩：没错，
应该隐藏：错误
});
设置超时（（）=>{
this.setState（{shoulhdide:true}）；
}, 1000);
}
render（）{
const p=this.state.isShown&&(
自毁。。。。
);
返回(
{p}
);
}
}
ReactDOM.render（，document.querySelector（“#app”）；

您基本上可以这样做：

具有跟踪鼠标位置的状态

x

和

y

，两个布尔值

显示为
和
应隐藏
，以协调消失div

单击后，通过将

isShown

设置为

true

来显示div，并立即

setTimeout

通过将

shouldHide

翻转为

true

添加一个类来开始隐藏它

添加类后，元素将淡出并触发

transitionend

事件，此时您可以通过将

isShown

翻转到

false

和

shouldHide

翻转到false布尔值来完全删除div

示例实现（很抱歉代码太糟糕，我已经有一段时间没有反应了）

---

class SelfDestructDemo扩展了React.Component{
建造师（道具）{
超级（道具）；
此.state={
x:0,，
y:0，
伊肖恩：错，
应该隐藏：错误
};
this.handleClick=this.handleClick.bind（this）；
this.reset=this.reset.bind（this）；
}
重置（）{
这是我的国家({
x:0,，
y:0，
伊肖恩：错，
应该隐藏：错误
});
}
handleClick（事件）{
if（this.state.isShown）{
返回；
}
const{clientX，clientY}=event；
这是我的国家({
x:clientX，
y:clientY，
伊肖恩：没错，
应该隐藏：错误
});
设置超时（（）=>{
this.setState（{shoulhdide:true}）；
}, 1000);
}
render（）{
const p=this.state.isShown&&(
自毁。。。。
);
返回(
{p}
);
}
}
ReactDOM.render（，document.querySelector（“#app”）；

实际上，你的方法没问题。基本上，你不应该仅仅删除它，而应该向该组件添加

淡出类。。您只需设置classname state
classname={this.state.visible}
或其他一些东西，向我们展示您编写的带问题的代码。不是你想要匹配的代码。看看你的方法（和原版一样，它会导致多次点击）其实没问题。基本上，你不应该仅仅删除它，而应该向该组件添加
淡出类。。您只需设置classname state
classname={this.state.visible}
或其他一些东西，向我们展示您编写的带问题的代码。不是您试图匹配的代码。请看一看（它会导致多次单击，就像原始代码一样）
renderDamageDealtParagraph = () => {
  if (this.state.hasPlayerAttacked) {
    return <p>{this.state.playerAttack}</p>;
    this.setState({ hasPlayerAttacked: false });
  }
};

class SelfDestructDemo extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      x: 0,
      y: 0,
      isShown: false,
      shouldHide: false
    };
    this.handleClick = this.handleClick.bind(this);
    this.reset = this.reset.bind(this);
  }
  reset() {
    this.setState({
      x: 0,
      y: 0,
      isShown: false,
      shouldHide: false
    });
  }
  handleClick(event) {
    if (this.state.isShown) {
      return;
    }
    const { clientX, clientY } = event;
    this.setState({
      x: clientX,
      y: clientY,
      isShown: true,
      shouldHide: false
    });

    setTimeout(() => {
      this.setState({ shouldHide: true });
    }, 1000);
  }
  render() {
    const p = this.state.isShown && (
      <div
        onTransitionEnd={this.reset}
        className={`${this.state.shouldHide ? "should-hide" : ""} modal`}
        style={{ top: this.state.y, left: this.state.x }}
      >
        Self destructing....
      </div>
    );

    return (
      <div className="container" onClick={this.handleClick}>
        {p}
      </div>
    );
  }
}

ReactDOM.render(<SelfDestructDemo />, document.querySelector("#app"));