gpt4 book ai didi

javascript - 如何使用 React.js 在 5 秒后隐藏消息

转载 作者:行者123 更新时间:2023-12-03 13:45:43 25 4
gpt4 key购买 nike

我需要使用 React.js 提交表单 5 秒后隐藏 div 元素内的消息。我在下面解释我的代码。

<div className="wrapper">
<div ref={divEl => {
this.divRef = divEl;
}}></div>
<form onSubmit={this.addItem}>
<input ref={(a)=>this.inputElement=a} placeholder="enter task">
</input>
<button type="submit">{this.state.editKey? "Update": "Add"}</button>
</form>
<TodoItems entries={this.state.items} delete={this.deleteItem} edit={this.editItem}/>
</div>
addItem(e){
e.preventDefault();
if(this.state.editKey){
this.saveEditedText();
return;
}
var itemArray = this.state.items;
if (this.inputElement.value !== '') {
itemArray.unshift({
text:this.inputElement.value,
key:Date.now()
})
this.setState({
items:itemArray
})
this.divRef.innerHTML = this.inputElement.value;
this.inputElement.value='';
this.divRef.insertAdjacentHTML("beforeend", '<p className="textcolor">Added successfully</p>');
}
}

表单提交后,我会显示成功消息。我需要在显示消息 5 秒后自动删除,意味着使用时间间隔。

最佳答案

setTimeout(() => {
this.setState({
items:itemArray
});
}, 5000)

这会给你一些时间。

否则有一个状态可以知道您何时更新数据,并根据此重新渲染 UI

关于javascript - 如何使用 React.js 在 5 秒后隐藏消息,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/48944826/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com