我想让一个段落出现在鼠标坐标的位置,但是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 的最佳等待是什么?
提前感谢任何可能提供帮助的人。
最佳答案
你基本上可以这样做:
- 有跟踪鼠标位置的状态
x
和y
,以及两个 bool 值isShown
和shouldHide
来协调消失的div - 单击时,通过将
isShown
设置为true
来显示 div,并立即setTimeout
通过添加一个类来在将来开始隐藏它将shouldHide
翻转为true
- 添加类后,元素将淡出并触发
transitionend
事件,此时您可以通过将isShown
翻转为来完全删除 div false
和shouldHide
为 false bool 值
示例实现(对糟糕的代码感到抱歉,自从我 React-ed 以来已经有一段时间了)
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"));
关于javascript - 如何在 React 鼠标位置渲染一段自毁段落?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/56367594/