React中文文档之Handling Events
来源:互联网 发布:平面设计软件 编辑:程序博客网 时间:2024/06/08 13:35
Handling Events - 事件处理
React元素的事件处理同DOM元素的事件处理非常相似。
有一些语法不同:
1.React事件使用 'camelCase-驼峰式' 命名,而不是 'lowercase-小写字母'
2.使用JSX,传递一个函数作为事件处理,而不是字符串
例如:
HTML代码:
略微不同于React:
另一个不同是,在React中,不能返回 'false' 来阻止默认行为。必须调用 'preventDefault'。例如,阻止链接打开新页面的默认行为:
HTML代码:
这里,'e' 是一个合成事件(synthetic event)。React根据 W3C规范 定义这些合成事件,因此不需要担心跨浏览器的兼容问题。可查看 'SyntheticEvent' 章节学习更多
当使用React,通常不需要调用 'addEventListener',给已经创建的DOM元素添加事件监听。仅当最初渲染元素时,提供一个监听器来代替。
当使用ES6类,定义了一个组件,一个常见的模式是:一个事件处理可定义为该类的一个方法。例如:Toggle组件来渲染一个按钮,允许用户切换 'ON' 和 'OFF' 状态:
你不得不小心JSX回调函数中的 'this' 的意思。在JS中,类方法默认没有被绑定。如果你忘记绑定 'this.handleClick',并且传递给 'onClick',当函数被真实调用时,'this' 将会是 'undefined'。
这不是React特有的行为;它是 'JS中函数如何工作' 的一部分(是js的语法)。通常,如果你涉及一个方法,没有 '()' 跟在方法名后面,例如:onClick={this.handleClick},你应该绑定这个方法。
如果调用 'bind' 使你苦恼,有2种方法可以绕过这个。如果你正在使用实验性的 'property initializer syntax-属性初始化语法',你可以使用属性初始化来正确的绑定回调:
使用 'Create React App' 方式创建项目(安装方式的一种),这个解析是默认启用的。
如果你没有使用属性初始化语法,你可以在回调函数中,使用一个 '箭头函数'(arrow function),例如:
这种语法的问题是:每次 'LoggingButton' 渲染,都会创建一个不同的回调函数。在大多数情况下,是没问题的。然而,如果这个回调函数作为一个prop传递给低级组件(内部组件),这些组件,可能执行一次额外的重新渲染。我们一般推荐在构造器中绑定,避免这类型的性能问题。
React元素的事件处理同DOM元素的事件处理非常相似。
有一些语法不同:
1.React事件使用 'camelCase-驼峰式' 命名,而不是 'lowercase-小写字母'
2.使用JSX,传递一个函数作为事件处理,而不是字符串
例如:
HTML代码:
<button onclick="activateLaser()">Activate Lasers</button>
略微不同于React:
<button onClick="{activateLaser}">Activate Lasers</button>
另一个不同是,在React中,不能返回 'false' 来阻止默认行为。必须调用 'preventDefault'。例如,阻止链接打开新页面的默认行为:
HTML代码:
<a href="#" onclick="console.log('The link was clicked.'); return false">Click me</a>React代码:
function ActionLink() {function handleClick(e) {e.preventDefault();console.log('The link was clicked');}return (<a href="#" onClick={handleClick}>Click me</a>);}
这里,'e' 是一个合成事件(synthetic event)。React根据 W3C规范 定义这些合成事件,因此不需要担心跨浏览器的兼容问题。可查看 'SyntheticEvent' 章节学习更多
当使用React,通常不需要调用 'addEventListener',给已经创建的DOM元素添加事件监听。仅当最初渲染元素时,提供一个监听器来代替。
当使用ES6类,定义了一个组件,一个常见的模式是:一个事件处理可定义为该类的一个方法。例如:Toggle组件来渲染一个按钮,允许用户切换 'ON' 和 'OFF' 状态:
class Toggle extends React.Component {constructor(props) {super(props);this.state = {isToggleOn: true};// This binding is necessary to make `this` work in the callbackthis.handleClick = this.handleClick.bind(this);}handleClick() {this.setState(prevState => ({isToggleOn: !prevState.isToggleOn}));}render() {return (<button onClick={this.handleClick}>{this.state.isToggleOn ? 'ON' : 'OFF'}</button>);}}ReactDOM.render(<Toggle />,document.getElementById('root'));
你不得不小心JSX回调函数中的 'this' 的意思。在JS中,类方法默认没有被绑定。如果你忘记绑定 'this.handleClick',并且传递给 'onClick',当函数被真实调用时,'this' 将会是 'undefined'。
这不是React特有的行为;它是 'JS中函数如何工作' 的一部分(是js的语法)。通常,如果你涉及一个方法,没有 '()' 跟在方法名后面,例如:onClick={this.handleClick},你应该绑定这个方法。
如果调用 'bind' 使你苦恼,有2种方法可以绕过这个。如果你正在使用实验性的 'property initializer syntax-属性初始化语法',你可以使用属性初始化来正确的绑定回调:
class LoggingButton extengs React.Component { // This syntax ensures `this` is bound within handleClick.// Warning: this is *experimental* syntax.handleClick = () => { console.log('this is:', this);}render() {return (<button onClick={this.handleClick}>Click me</button>);}}
使用 'Create React App' 方式创建项目(安装方式的一种),这个解析是默认启用的。
如果你没有使用属性初始化语法,你可以在回调函数中,使用一个 '箭头函数'(arrow function),例如:
class LoggingButton extengs React.Component {handleClick = () => { console.log('this is:', this);}render() {// This syntax ensures `this` is bound within handleClickreturn (<button onClick={(e) => this.handleClick(e)}>Click me</button>);}}
这种语法的问题是:每次 'LoggingButton' 渲染,都会创建一个不同的回调函数。在大多数情况下,是没问题的。然而,如果这个回调函数作为一个prop传递给低级组件(内部组件),这些组件,可能执行一次额外的重新渲染。我们一般推荐在构造器中绑定,避免这类型的性能问题。
0 0
- React中文文档之Handling Events
- React官方文档--Handling Events
- Reactjs入门官方文档(五)【handling-events】
- React中文文档之Forms
- Handling Logoff Events
- Handling UI events
- 多点触摸 Handling Events
- Handling Events in Windows
- (5)Handling UI events
- ReactNative基础---Handling Events
- React-bootstrap 中文文档
- React-Navigation中文文档
- React Native 之 Handling Text Input
- React中文教程 - Event Handling(事件处理)
- Handling Callback Events From RealPlayer
- Handling events within custom components
- Handling Events in JavaServer Faces
- Handling of asynchronous events---reference
- easyui datagrid 数据的显示和查询
- 毕业设计每日记-2016.11.17
- android进阶----java知识----堆栈
- Java基础 - 二叉树的遍历之深度优先遍历(递归遍历)
- Java项目经验—以项目为驱动学java
- React中文文档之Handling Events
- caffe源码之VideoDataLayer
- OJ.【二分】就是看看这个方法就好
- 朴素贝叶斯
- 2016年11月17日学习总结
- kinect 2.0 SDK学习笔记(六)--深度图的实时平滑之加权移动平均机制
- web workers(应用缓冲)
- java生成MD5串
- 字符串匹配-暴力搜索算法