javascript - 如何在 React 鼠标位置渲染一段自毁段落？

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 - 在状态下，通过鼠标点击切换 bool 值

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

2 - 在函数中，当 bool 值为真时，返回一个段落并将 bool 值设置回假

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

但是，这种方法谬误太多；主要是在将 bool 值重置为 false 后，呈现的段落立即消失(而不是在 1000 毫秒超时后)。

在使用 vanilla JS 的 ReactJS 中实现类似 linked fiddle 的最佳等待是什么？

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

Answer 1

你基本上可以这样做:

1. 有跟踪鼠标位置的状态 x 和 y，以及两个 bool 值 isShown 和 shouldHide 来协调消失的div
2. 单击时，通过将 isShown 设置为 true 来显示 div，并立即 setTimeout 通过添加一个类来在将来开始隐藏它将 shouldHide 翻转为 true
3. 添加类后，元素将淡出并触发 transitionend 事件，此时您可以通过将 isShown 翻转为 来完全删除 div false 和 shouldHide 为 false bool 值

示例实现(对糟糕的代码感到抱歉，自从我 React-ed 以来已经有一段时间了)

JS Fiddle

---

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"));