Добавьте элементы в DOM, затем удалите их через n секунд?

Question

Я хочу создать эффект анимации при нажатии. Мне нужно добавить элемент и удалить его за 3 секунды при каждом нажатии. Не один элемент, если пользователи нажимают 100 раз за 3 секунды, я должен добавить 100 элементов и удалить их.

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

Это легко сделать с ванильным JS/JQuery

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

Должен ли я использовать React для отображения этих элементов (.map, setState, ...), или я могу использовать ванильный 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, просто использовать встроенные функции JS ваниль на Node с:

добавить класс к элементу: elm.classList.add("animation")

Чтобы добавить элемент в качестве ребенка другого: parent.appendChild(elm) (для вас, parent, вероятно, будет document.querySelector(".main"))

Чтобы удалить ребенка элемента: parent.removeChild(elm) (что эквивалентно, elm.parentNode.removeChild(elm))