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

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其实是不一样的。