我需要在使用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秒后显示消息将自动删除意味着使用timeinterval。
答案 0 :(得分:0)
你可以尝试
this.divRef.insertAdjacentHTML("beforeend", '<p className="textcolor">Added successfully</p>');
setTimeout( () => {
this.divRef.querySelector(':last-child').remove();
}, 5000);
答案 1 :(得分:0)
setTimeout(() => {
this.setState({
items:itemArray
});
}, 5000)
这会给你一些时间。
否则有一个状态需要知道何时更新数据,并根据此
重新呈现UI