React 事件
学习如何在React应用中与事件进行交互
React提供了一种简单的方式来管理事件。准备与addEventListener
说再见吧。
在关于状态的上一篇文章中,你看到了这个例子:
1 | const CurrencySwitcher = props => { |
如果你已经使用JavaScript一段时间了,这就像是普通的JavaScript事件处理程序,只不过这次你是在JavaScript中定义一切,而不是在HTML中,并且你传递的是一个函数,而不是一个字符串。
实际的事件名称有一点不同,因为在React中你使用驼峰命名法,所以onclick
变成了onClick
,onsubmit
变成了onSubmit
。
作为参考,这是一个将JavaScript事件混合在一起的老派HTML:
1 | <button onclick="handleChangeCurrency()">...</button> |
事件处理函数
在组件类中将事件处理函数定义为方法是一种惯例:
1 | class Converter extends React.Component { |
所有的处理函数都接收一个符合W3C UI Events规范的事件对象,可跨浏览器使用。
在方法中绑定this
不要忘记绑定方法。ES6类的方法默认情况下不绑定this
。这意味着如果你不将方法定义为箭头函数,this
将不会被定义:
1 | class Converter extends React.Component { |
使用Babel的属性初始化语法(在create-react-app
中默认启用)时,或者需要在构造函数中手动绑定:
1 | class Converter extends React.Component { |
事件参考
有许多支持的事件,下面是一个摘要列表。
剪贴板
- onCopy
- onCut
- onPaste
组成
- onCompositionEnd
- onCompositionStart
- onCompositionUpdate
键盘
- onKeyDown
- onKeyPress
- onKeyUp
焦点
- onFocus
- onBlur
表单
- onChange
- onInput
- onSubmit
鼠标
- onClick
- onContextMenu
- onDoubleClick
- onDrag
- onDragEnd
- onDragEnter
- onDragExit
- onDragLeave
- onDragOver
- onDragStart
- onDrop
- onMouseDown
- onMouseEnter
- onMouseLeave
- onMouseMove
- onMouseOut
- onMouseOver
- onMouseUp
选择
- onSelect
触摸
- onTouchCancel
- onTouchEnd
- onTouchMove
- onTouchStart
UI
- onScroll
鼠标滚轮
- onWheel
媒体
- onAbort
- onCanPlay
- onCanPlayThrough
- onDurationChange
- onEmptied
- onEncrypted
- onEnded
- onError
- onLoadedData
- onLoadedMetadata
- onLoadStart
- onPause
- onPlay
- onPlaying
- onProgress
- onRateChange
- onSeeked
- onSeeking
- onStalled
- onSuspend
- onTimeUpdate
- onVolumeChange
- onWaiting
图片
- onLoad
- onError
动画
- onAnimationStart
- onAnimationEnd
- onAnimationIteration
过渡
- onTransitionEnd
tags: [“React”, “Events”, “JavaScript”]