学习如何在React应用中与事件进行交互

React提供了一种简单的方式来管理事件。准备与addEventListener说再见吧。

在关于状态的上一篇文章中，你看到了这个例子：

const CurrencySwitcher = props => {
 return (
 <button onClick={props.handleChangeCurrency}>
 当前货币是{props.currency}。更改它！
 </button>
 )
}

如果你已经使用JavaScript一段时间了，这就像是普通的JavaScript事件处理程序，只不过这次你是在JavaScript中定义一切，而不是在HTML中，并且你传递的是一个函数，而不是一个字符串。

实际的事件名称有一点不同，因为在React中你使用驼峰命名法，所以onclick变成了onClick，onsubmit变成了onSubmit。

作为参考，这是一个将JavaScript事件混合在一起的老派HTML：

<button onclick="handleChangeCurrency()">...</button>

事件处理函数

在组件类中将事件处理函数定义为方法是一种惯例：

class Converter extends React.Component {
 handleChangeCurrency = event => {
 this.setState({ currency: this.state.currency === '€' ? '$' : '€' })
 }
}

所有的处理函数都接收一个符合W3C UI Events规范的事件对象，可跨浏览器使用。

在方法中绑定this

不要忘记绑定方法。ES6类的方法默认情况下不绑定this。这意味着如果你不将方法定义为箭头函数，this将不会被定义：

class Converter extends React.Component {
 handleClick = e => {
 /\* ... \*/
 }
 //...
}

使用Babel的属性初始化语法（在create-react-app中默认启用）时，或者需要在构造函数中手动绑定：

class Converter extends React.Component {
 constructor(props) {
 super(props)
 this.handleClick = this.handleClick.bind(this)
 }
 handleClick(e) {}
}

事件参考

有许多支持的事件，下面是一个摘要列表。

剪贴板

  • 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