React event.preventDefault使用方法

event.preventDefault

定义和用法：
取消事件的默认动作

简单看一下下面代码：

class NameForm extends React.Component {constructor(props) {super(props);this.state = {value: ''};this.handleChange = this.handleChange.bind(this);this.handleSubmit = this.handleSubmit.bind(this);}handleChange(event) {this.setState({value: event.target.value});}handleSubmit(event) {alert('A name was submitted: ' + this.state.value);event.preventDefault();}render() {return (<form onSubmit={this.handleSubmit}><label>Name:<input type="text" value={this.state.value} onChange={this.handleChange} /></label><input type="submit" value="Submit" /></form>);}
}

这是我重React官网doc中拿过来的 REACT

我们要注意看的就是 onSubmit部分的代码

handleSubmit 函数中可以看到添加了event.preventDefault();

这样的话我们会取消原有onSubmit中默认的效果，

效果是什么呢？就是在url中带着 ‘？’ 转换页面的效果

React event.preventDefault使用方法相关推荐

Event.preventDefault 、Event.stopPropagation 和 Event.stopImmediatePropagation
Event.preventDefault() 取消浏览器对当前事件的默认行为. Event.stopPropagation() 阻止事件冒泡. Event.stopImmediatePropagati ...
React学习-event.preventDefault()方法的简单介绍
React学习-event.preventDefault()方法的简单介绍 react官方文档中有这么一段: 在 React 中另一个不同点是你不能通过返回 false 的方式阻止默认行为.你必须显式 ...
event.preventDefault() 和 event.stopPropagation()方法之间有什么区别？如何知道是否在元素中使用了event.preventDefault()方法？
event.preventDefault() 方法可防止元素的默认行为.如果在表单元素中使用,它将阻止其提交.如果在锚元素中使用,它将阻止其导航.如果在上下文菜单中使用,它将阻止其显示或显示.even ...
event.stopPropagation和event.preventDefault有什么区别？
他们似乎在做同样的事情--是现代的还是老的? 还是不同的浏览器支持它们? 当我自己处理事件(没有框架)时,我总是检查两者并执行(如果存在). (我也return false ,但是我感觉不适用于与no ...
js事件之event.preventDefault()与event.stopPropagation()用法区别
event.preventDefault()将通知 Web 浏览器不要执行与事件关联的默认动作(如果存在这样的动作).例如,如果 type 属性是 "submit",在事件传播的任 ...
jQuery之防止【冒泡事件】，阻止默认行为【return false】 event.stopPropagation event.preventDefault...
知识点: event.stopPropagation() 阻止冒泡 event.preventDefault() 阻止默认事件,比如button提交后跳转到链接页面两者都可以用 return ...
阻止默认事件event.preventDefault();
阻止浏览器默认事件.什么是默认事件,例如浏览器默认右键菜单.a标签默认连接跳转...,如何阻止呢? Firefox中,event必须作为参数传入. IE中,event是window对象的属性. ev ...
阻止事件冒泡，阻止默认事件，event.stopPropagation()和event.preventDefault()，return false的区别
今天来看看前端的冒泡和事件默认事件如何处理 1.event.stopPropagation()方法这是阻止事件的冒泡方法,不让事件向documen上蔓延,但是默认事件任然会执行,当你掉用这个方法的时 ...
event.stopPropagation()和event.preventDefault()
阻止事件冒泡,阻止默认事件,event.stopPropagation()和event.preventDefault(),return false的区别 / 编辑删除今天 ...

React event.preventDefault使用方法

event.preventDefault

React event.preventDefault使用方法相关推荐

最新文章

热门文章