我有一个带有句柄的表单单击我的提交按钮。在我的handleSubmit函数中,我向后端发出了Post请求,并且正在将数据发送到后端并正在更新状态。但是,这样做会刷新整个页面。
如何防止其刷新浏览器?
我已经尝试过e.preventDefault();这只会迫使您点击刷新才能在浏览器中看到它。
handleSubmit = async (e) => {
console.log(e);
const data = this.state.list;
try {
const addItem = await fetch('http://localhost:9000/addItem', {
method: 'POST',
credentials: 'include',
body: JSON.stringify(this.state),
headers: {
'Content-Type': 'application/json'
}
});
} catch(err) {
console.log(err);
}
}
componentDidMount() {
this.getList().then((list) => {
this.setState({list: list.data})
}).catch((err) => {
console.log(err);
})
}
render() {
let data = this.state.list
let categoryList = Object.keys(data).splice(0, 9).map((item) =>
<div className='category' key={item}>
<h1> {item} </h1>
<div className='itemWraper'>
{data[item].map((value) =>
<div key={value} style={{display: 'flex'}}>
<p className='item'> {value} </p>
<button className='deleteButton' item={value} id=
{this.state._id} onClick={() => this.deleteItem(value,
this.state._id, item)}>X</button>
</div>
)}
</div>
</div>
)
let category = Object.keys(data).splice(0, 9).map((item) =>
<option key={item} value={item}>{item}</option>
)
return(
<div className='background'>
<h1 className='listName'> {this.props.data.name} </h1>
<div className='wrapper'>
<form>
<input className='addItemInput' type='text' name='name'
placeholder='your item..' onChange={this.handleChange}/>
<div className="select">
<select name='category' onChange={this.handleChange}>
<option> Choose a category </option>
{category}
</select>
</div>
<button onClick={this.handleSubmit}
className='addItemButton'> + </button>
</form>
</div>
<div className='categoryWrapper'>
{categoryList}
</div>
</div>
)
}
}
没有错误。它正在正常工作。我希望它能像这样更加反应
答案 0 :(得分:0)
我猜您正在使用诸如 如果是这种情况,则单击该按钮将刷新页面。 因此,将类型从“提交”更改为“按钮”可以解决您的问题。
答案 1 :(得分:0)
e.preventDefault()对于防止重新加载页面是必需的。
您应该在发布项目的同时将其添加到组件状态或应用程序状态,以使其仍然显示。
handleSubmit = async (e) => {
console.log(e);
const data = this.state.list;
try {
const addItem = await fetch('http://localhost:9000/addItem', {
method: 'POST',
credentials: 'include',
body: JSON.stringify(this.state),
headers: {
'Content-Type': 'application/json'
}
});
this.setState({list: [...this.state.list, YOUR_NEW_ADDITION_TO_THE_LIST]})
} catch(err) {
console.log(err);
}
}