将元素添加到 DOM 然后在 n 秒后删除它们？

Question

我想创建点击动画效果。我需要添加元素并在每次点击后 3 秒内将其删除。不是一个元素，如果用户在3秒内点击100次，我应该追加100个元素然后移除。

click() {
  // create element
  // append element to div
  // remove in 3 sec
}
render() {
   return (
     <div className="main" onClick={this.click}>Click it</div>
   )
}

使用 vanila JS 很容易做到 / JQuery

click() {
  let elm = $('</div>');
  elm.addClass('animation');
  $('.main').append(elm);
  setTimeout(() => {
     elm.remove();
  }, 3000);
}

我应该使用 React 来渲染这些元素(.map, setState,...) 还是我可以使用 vanilla JS(appendChild, removeChild)?

JQuery 中的简单示例 - https://jsfiddle.net/W4Km8/10107/

谢谢。

Answer 1

你可以这样做：

this.state = { items: [] }

addItem() {
  const newItem = (<span>hello</span>)

  this.setState({ items: this.state.items.concat(newItem) }, () => {
    setTimeout(() => {
      this.setState({ items: this.state.items.filter(i => i !== newItem) })
    }, 3000)
  })
}

render() {
  return (
    <div>
      <div className="main" onClick={this.addItem}>Click it</div>
      {this.state.items.map((item, i) =>
        <div key={i}>{item}</div>
      )}
    </div>
  )
}

Answer 2

没有 jQuery，只需在 Nodes 上使用内置的 vanilla JS 函数：

要向元素添加 class：elm.classList.add("animation")

添加一个元素作为另一个元素的子元素：parent.appendChild(elm) (for you, parent would probably be document.querySelector(".main"))

删除元素的子元素：parent.removeChild(elm)（等价于 elm.parentNode.removeChild(elm)）

将元素添加到 DOM 然后在 n 秒后删除它们？

Add elements to the DOM then remove them after n seconds?

html

javascript

ecmascript-6

reactjs

react-jsx