React 事件处理

  另外一篇总结:react 中的事件绑定2019-05-16 更新

  建议:在了解 js 的 this 取值后食用更佳。

一、react 与 Html 中用法的异同和注意点

  html 中的绑定事件的写法:

<button onclick="activateLasers()">  // onClick = "xxxx()"
激活按钮
</button>

  react 中的写法:

<button onClick={activateLasers}>  // onclick = { xxxx }
激活按钮
</button>

  在 React 中另一个不同是你不能使用返回 false 的方式阻止默认行为, 必须明确的使用 preventDefault。

  例如,通常我们在 HTML 中阻止链接默认打开一个新页面,可以这样写:

<a href="#" onclick="console.log('点击链接'); return false">  // return false
点我
</a>

  但是,在 react 中,阻止默认行为必须得用下面的方式:

function ActionLink() {
function handleClick(e) {
e.preventDefault(); // preventDefault()
console.log('链接被点击');
} return (
<a href="#" onClick={handleClick}>
点我
</a>
);
}

  

  同样,使用 React 的时候通常不需要使用 addEventListener 为一个已创建的 DOM 元素添加监听器。只需要在这个元素初始渲染的时候提供一个监听器。

二、绑定事件处理函数

  首先一个例子:

class Toggle extends React.Component {
constructor(props) {
super(props);
this.state = {isToggleOn: true}; // 这边绑定是必要的,这样 `this` 才能在回调函数中使用
// 这是其中的一种写法
this.handleClick = this.handleClick.bind(this);
} handleClick() {
this.setState(prevState => ({ // prevState 会在后面关于 setState 中详细介绍
isToggleOn: !prevState.isToggleOn
}));
} render() {
return (
<button onClick={this.handleClick}>
{this.state.isToggleOn ? 'ON' : 'OFF'}
</button>
);
}
} ReactDOM.render(
<Toggle />,
document.getElementById('example')
);

  为什么需要这样写?

  我的看法是和 this、 bind() 以及 函数的执行符号 有关。函数执行的符号是 "()"。

 1.为什么在之前的组件案例(入坑笔记(二)的 Clock 组件)中的 tick 方法不需要绑定?

一些疑问

你必须谨慎对待 JSX 回调函数中的 this,类的方法默认是不会绑定 this 的。如果你忘记绑定 this.handleClick 并把它传入 onClick, 当你调用这个函数的时候 this 的值会是 undefined。

这并不是 React 的特殊行为;它是函数如何在 JavaScript 中运行的一部分。通常情况下,如果你没有在方法后面添加 () ,例如 onClick={this.handleClick},你应该为这个方法绑定 this。

  函数绑定的其他两种方法:

    1.使用 ES6 的箭头函数来定义组件中的函数(属性初始化语法):

class LoggingButton extends React.Component {
// 这个语法确保了 `this` 绑定在 handleClick 中
handleClick = () => {
console.log('this is:', this);
} render() {
return (
<button onClick={this.handleClick}>
Click me
</button>
);
}
}

    2.render 函数中使用回调函数(不建议使用):

class LoggingButton extends React.Component {
handleClick() {
console.log('this is:', this);
} render() {
// 这个语法确保了 `this` 绑定在 handleClick 中
return (
<button onClick={(e) => this.handleClick(e)}> // 这边实际上是执行了一个回调函数,在回调函数中执行 handleClick 方法
Click me
</button>
);
}
}

三、向事件处理函数传递参数(无参函数 -> 有参函数)

  两种方式,等价:

 <button onClick={(e) => this.deleteRow(id, e)}>Delete Row</button>    // 回调形式传参
<button onClick={this.deleteRow.bind(this, id)}>Delete Row</button> // bind() 形式传参

  

  值得注意的是,通过 bind 方式向监听函数传参,在类组件中定义的监听函数,事件对象 e 要排在所传递参数的后面,例如:

class Popper extends React.Component{
constructor(){
super();
this.state = {name:'Hello world!'};
} preventPop(name, e){ //事件对象e要放在最后
e.preventDefault();
alert(name);
} render(){
return (
<div>
<p>hello</p>
{/* 通过 bind() 方法传递参数。 */}
<a href="https://reactjs.org" onClick={this.preventPop.bind(this,this.state.name)}>Click</a>
</div>
);
}
}

react 入坑笔记(四) - React 事件绑定和传参的更多相关文章

  1. react 入坑笔记(一)

    一些概念: 1.组件:概念等同于 vue 中的组件,字面意思,不过 vue 中组件是以 .vue 结尾,通过 vue-loader 编译成 js,而 react 组件就是 js. 2.jsx:js 语 ...

  2. react 入坑笔记(五) - 条件渲染和列表渲染

    条件渲染和列表渲染 一.条件渲染 条件渲染较简单,使用 JavaScript 操作符 if 或条件运算符来创建表示当前状态的元素,然后让 React 根据它们来更新 UI. 贴一个小栗子: funct ...

  3. react 入坑笔记(三) - Props

    React Props props - 参数. 组件类 React.Component 有个 defaultProps 属性,以 class xxx extend React.Component 形式 ...

  4. react 入坑笔记(六) - 组件的生命周期

    React 组件生命周期 详细参考: react 组件生命周期 组件的生命周期可分为三个状态: 1.Mounting:已经挂载/插入到真实 DOM 树上: 2.Updating:正在被重新渲染: 3. ...

  5. react 入坑笔记(二) - State

    React State 一. state 大致思想:在 react 中,每个组件都是一个状态机,通过与用户的交互,实现不同状态,然后渲染 UI,让用户界面和数据保持一致.React 里,只需更新组件的 ...

  6. es6 入坑笔记(四)---异步处理

    promise 用于js的异步处理 形式: 1.申明一个promise的对象 let p = new Promise(function(成功时的参数,失败时的参数){ if(....){ 成功时的参数 ...

  7. angular,vue,react的基本语法—动态属性、事件绑定、ref,angular组件创建方式

    基本语法: 动态属性: vue: v-bind:attr="msg" :attr="msg" react: attr={msg} angular [attr]= ...

  8. MVVM设计模式和WPF中的实现(四)事件绑定

    MVVM设计模式和在WPF中的实现(四) 事件绑定 系列目录: MVVM模式解析和在WPF中的实现(一)MVVM模式简介 MVVM模式解析和在WPF中的实现(二)数据绑定 MVVM模式解析和在WPF中 ...

  9. oracle入坑日记<四>表空间

    1   表空间是什么 1.1.数据表看做的货品,表空间就是存放货品的仓库.SQLserver 用户可以把表空间看做 SQLserver 中的数据库. 1.2.引用[日记二]的总结来解释表空间. 一个数 ...

随机推荐

  1. falcon常用参数解析

    CPU.xxx cpu.idle cpu.idle表示除硬盘IO等待时间以外其它等待时间,这个值越大,表示cpu越空闲,还可以执行更多的任务,反之亦然,此处我们falcon展示的是idle的波动情况, ...

  2. ASP.NET Core MVC – Tag Helpers 介绍

    ASP.NET Core Tag Helpers系列目录,这是第一篇,共五篇: ASP.NET Core MVC – Tag Helpers 介绍 ASP.NET Core MVC – Caching ...

  3. mongodb java3.2驱动 测试 一些记录

    mongo驱动包 自带线程池的概念 获取 MongoClient mongoClient 后 通过客户端(mongoClient ) 获取 库操作 MongoDatabase 获取 表操作 Mongo ...

  4. UINavigationController - BNR

    继续上篇UITableView的编辑操作. 当你初始化一个UINavigationController对象时,它将拥有一个根视图控制器,即UIViewController.根视图控制器一直存在于sta ...

  5. 理解MySql的锁&事务隔离级别

    这几篇文章是从网上(http://www.hollischuang.com)看到的一系列文章,也是重温了一下数据库的相关知识.下面是对这些文章的一些前后行文逻辑的说明: 我们知道,在DBMS的多个事业 ...

  6. Spark性能优化指南——基础篇(转载)

    前言 在大数据计算领域,Spark已经成为了越来越流行.越来越受欢迎的计算平台之一.Spark的功能涵盖了大数据领域的离线批处理.SQL类处理.流式/实时计算.机器学习.图计算等各种不同类型的计算操作 ...

  7. 调试CAS源码步骤

    1.先安装gradle2.eclipse安装gradle(sts)插件3.克隆cas源码 这一块需要很长时间4.gradle build 会遇到安装node.js 的模块 不存在的问题. 按提示解决就 ...

  8. ASP.NET Core依赖注入——依赖注入最佳实践

    在这篇文章中,我们将深入研究.NET Core和ASP.NET Core MVC中的依赖注入,将介绍几乎所有可能的选项,依赖注入是ASP.Net Core的核心,我将分享在ASP.Net Core应用 ...

  9. Heroku + Node.js + HTTPS

    昨天把 biz-to-me 升级到支持 HTTPS 了,为此研究了一下如何让 Heroku 上跑的 Node.js 应用支持 HTTPS.我发现并没有任何文章描述这个具体的流程,只有零碎的信息,所以在 ...

  10. 全文搜索引擎 Elasticsearch 入门教程

    全文搜索属于最常见的需求,开源的 Elasticsearch (以下简称 Elastic)是目前全文搜索引擎的首选. 它可以快速地储存.搜索和分析海量数据.维基百科.Stack Overflow.Gi ...