我的屏幕上有一个按钮,单击它之后,我想在屏幕上显示五秒钟,然后不再显示。我知道它需要setTimeout和clearTimeinterval,但是我无法正常工作。 这是代码。
class App extends React.Component {
constructor(props) {
super(props);
this.state = {
display: false
};
}
handler = () => {
setTimeout(() => {
this.setState({ display: true });
}, 1000);
};
componentDidUpdate() {// this where I couldn't get things done
clear
}
render() {
console.log(this.state.display);
return (
<div>
<h4>This is heading </h4>
<button onClick={this.handler}>CLICK</button>
{this.state.display === true ? "lalala" : null}
</div>
);
}
}
答案 0 :(得分:0)
我认为您可以使用另一个在处理程序函数中触发setTimeout时将显示设置为false的函数。因此,这里的hideShowing函数使用setTimeout将显示更改为false。这样可以解决您的问题。确保在componentWillUnMount中清除它们
handler = () => {
this.timer = setTimeout(() => {
this.setState({ display: true });
this.hideShowing();
}, 1000);
};
hideShowing = () => {
this.timer1= setTimeout(() => {
this.setState({
display: false
});
}, 1000);
}
componentWillUnMount(){
clearTimeout(this.timer);
clearTimeout(this.timer1);
}