React学习-event.preventDefault()方法的简单介绍

react官方文档中有这么一段:

在 React 中另一个不同点是你不能通过返回 false 的方式阻止默认行为。你必须显式的使用 preventDefault。例如，传统的 HTML 中阻止表单的默认提交行为，你可以这样写：

 <form onsubmit="console.log('You clicked submit.'); return false"><button type="submit">Submit</button></form>

在 React 中，可能是这样的：
在 React 中另一个不同点是你不能通过返回 false 的方式阻止默认行为。你必须显式的使用 preventDefault。例如，传统的 HTML 中阻止表单的默认提交行为，你可以这样写：


function Form() {function handleSubmit(event) {event.preventDefault();console.log('You clicked submit.');}return (<form onSubmit={handleSubmit}><button type="submit">Submit</button></form>);
}

简单聊一下这里 event.preventDefault() 的作用，在上面的例子中定义了一个 type=submit 的 input标签，会执行html的提交事件，form标签中定义了提交事件触发的方法，这里 onSubmit={handleSubmit} 是react是事件处理方法，调用 handleSubmit 后会传参event，这里调用 preventDeafult 会阻止默认提交事件发生，注意是阻止html的默认提交行为。

总结以下就是，event.preventDefault() 会阻止某些默认事件的发生，例如：

例子1


<a href="http://www.baidu.com" id="testLink">百度</a>

默认点击跳转百度，如果对 id=testLink 中加了 event.preventDefault()那就会阻止跳转。

例子2

我们知道form的submit提交后会刷新页面

增加了 event.preventDefault() 后提交，提交后点击确定，留在原页面
不增加event.preventDefault(),提交后确定，刷新页面，回到首页

提交按键的方法如下：

 handleSubmit(event) {alert("提交的内容：\n" +"姓名：" + this.state.name + "\n" +"电话：" + this.state.phone + "\n" +"邮箱：" + this.state.email + "\n");//event.preventDefault();}

然后聊一下 event.preventDefault() 的一些注意点：

首先event是是react组装的合成事件，里面有着相关的事件数据，一般常用的就event.target获取事件对象信息
React 事件与原生事件不完全相同。所以 js的event.preventDefault() 和 react的event.preventDefault() 虽然都可以用，但两个event其实是不一样的。

React学习-event.preventDefault()方法的简单介绍相关推荐

React学习（一）：简单介绍入门
序言:React官网介绍很多内容,但仍想总结一下加深了解. 目录一.React介绍二.React特点三.引入React 库四.第一个react项目一.React介绍 React 起源于 Fa ...
流形学习（Manifold Learning）简单介绍
传统的机器学习方法中,数据点和数据点之间的距离和映射函数f都是定义在欧式空间中的,然而在实际情况中,这些数据点可能不是分布在欧式空间中的,因此传统欧式空间的度量难以用于真实世界的非线性数据,从而需要对 ...
HTTP请求方式中8种请求方法（简单介绍）
HTTP请求方式中8种请求方法(简单介绍) 简单介绍 HTTP是超文本传输协议,其定义了客户端与服务器端之间文本传输的规范.HTTP默认使用80端口,这个端口指的是服务端的端口,而客户端使用的端口是动 ...
event.preventDefault() 和 event.stopPropagation()方法之间有什么区别？如何知道是否在元素中使用了event.preventDefault()方法？
event.preventDefault() 方法可防止元素的默认行为.如果在表单元素中使用,它将阻止其提交.如果在锚元素中使用,它将阻止其导航.如果在上下文菜单中使用,它将阻止其显示或显示.even ...
c 语言重载参数类型不同重载和,C++基础学习之函数重载的简单介绍
前言我们在平时写代码中会用到几个函数但是他们的实现功能相同,但是有些细节却不同.例如:交换两个数的值其中包括(int, float,char,double)这些个类型.在C语言中我们是利用不同的函数 ...
软件包管理之 file.src.rpm 使用方法的简单介绍
作者:北南南北来源:LinuxSir.Org 提要: 初学Linux的弟兄可能会看到file.src.rpm 格式的软件包,但不知道如何使用:现简单介绍一下,太详细的我也不太知道:我毕竟不是计算机科 ...
【1】学习前言及数据分析的简单介绍jupyter的介绍与安装
学习内容学习方法 • 重视基础 • 归纳总结,构建自己知识体系 • 推荐使用xmind思维导图 • 三多法则 • 多练习 • 多应用 • 多思考发展方向例子: • 数据分析班级到课人数 • 有8 ...
【深度学习】超参数优化简单介绍
介绍超参数优化也称作超参数调整.往往机器学习/深度学习的算法中包含了成千上百万的参数,这些参数有的可以通过训练来优化,例如神经网络中的权重(Weight)等,我们称为参数(Parameter),也有 ...
从零开始学习docker（零）简单介绍Dockerfile
如果不使用docker,面临的问题有: 部署非常慢成本非常高资源浪费难于迁移和扩展可能会被限定硬件厂商虚拟化技术的优点: 虚拟化技术出现以后,一个物理机可以部署多个App,每个App独立运行 ...

React学习-event.preventDefault()方法的简单介绍

React学习-event.preventDefault()方法的简单介绍

例子1

例子2

React学习-event.preventDefault()方法的简单介绍相关推荐

最新文章

热门文章