通过 onClick 反应添加元素并在超时后删除它们答案

【问题标题】：React add element by onClick and remove them after timeout通过 onClick 反应添加元素并在超时后删除它们
【发布时间】：2020-11-08 11:12:45
【问题描述】：

我想在按钮上创建涟漪效果。

当我单击 Button 组件时，我想添加 span 元素作为它的子元素。它包含一些 CSS 来制作涟漪效果。 900 毫秒后，我想删除这个 span 元素。这个想法创立了here

这里有一些Sandbox 来解释主要思想。

所以，问题是当我快速多次点击并且涟漪效应范围无法正常工作时

【问题讨论】：

它的工作方式与您应用它的方式相同。没有任何麻烦。如果您在跨度已经生效时单击该按钮，则它不会显示任何效果。您应该有 Bounce，这样您就不会看到意外的行为。我分叉了你的沙箱以可视化事情的变化：codesandbox.io/s/recursing-gareth-lc7wg?file=/src/styles.css

【解决方案1】：

由于您使用的是单个涟漪而不是多个涟漪，因此您的效果仅在用户没有第二次点击时才有效，而自第一次点击以来的时间和您的 900 毫秒超时尚未过去。

您可以根据需要创建生成的涟漪，并在动画以自定义事件结束后将其删除。因此，如果用户单击多次，使用 setTimeout() 总是会触发错误行为，因为您的代码会强制单个涟漪像单独的多个涟漪一样工作。

希望我的解释足够准确和清晰。

【讨论】：