事件处理

React 元素的事件处理和 DOM 元素类似。但是有一点语法上的不同:

• React 事件绑定属性的命名采用驼峰式写法，而不是小写。
• 如果采用 JSX 的语法你需要传入一个函数作为事件处理函数，而不是一个字符串(DOM 元素的写法)

Live Editor

class Example extends React.Component { constructor(props) { super(props) this.state = {count: 0} } increase() { this.setState({ count: this.state.count + 1 }) } render() { return ( <div> <p>您点击了 {this.state.count} 次</p> <Button variant="outlined" type="button" onClick={() => this.increase()}>递增</Button> </div> ) } }

class Example extends React.Component {
  constructor(props) {
    super(props)
    this.state = {count: 0}
  }

  increase() {
    this.setState({
      count: this.state.count + 1
    })
  }

  render() {
    return (
      <div>
        <p>您点击了 {this.state.count} 次</p>
        <Button variant="outlined" type="button" onClick={() => this.increase()}>递增</Button>  
      </div>
    )
  }
}

Result

Loading...

鼠标事件（Mouse）

• onClick
• onContextMenu
• onDoubleClick
• onDrag
• onDragEnd
• onDragEnter
• onDragExit
• onDragLeave
• onDragOver
• onDragStart
• onDrop
• onMouseDown
• onMouseEnter
• onMouseLeave
• onMouseMove
• onMouseOut
• onMouseOver
• onMouseUp

tip

onMouseEnter 和 onMouseLeave 事件从离开的元素向进入的元素传播，不是正常的冒泡，也没有捕获阶段。

键盘事件（Keyboard）

• onKeyDown
• onKeyPress
• onKeyUp

tip

key 属性可以是 DOM Level 3 Events spec 里记录的任意值。

焦点事件（Focus）

• onFocus
• onBlur

表单事件（Form）

• onChange
• onInput
• onInvalid
• onReset
• onSubmit

触摸事件（Touch）

• onTouchCancel
• onTouchEnd
• onTouchMove
• onTouchStart

滚动事件（Scroll）

• onScroll

注意

从 React 17 开始，onScroll 事件在 React 中不再冒泡。这与浏览器的行为一致，并且避免了当一个嵌套且可滚动的元素在其父元素触发事件时造成混乱。

滚轮事件（Wheel）

• onWheel

选择事件（Select）

• onSelect

剪贴板事件（Clipboard）

• onCopy
• onCut
• onPaste

图像事件（Image）

• onLoad
• onError

动画事件（Animation）

• onAnimationStart
• onAnimationEnd
• onAnimationIteration

过渡事件（Transition）

• onTransitionEnd

媒体事件（Media）

• onAbort
• onCanPlay
• onCanPlayThrough
• onDurationChange
• onEmptied
• onEncrypted
• onEnded
• onError
• onLoadedData
• onLoadedMetadata
• onLoadStart
• onPause
• onPlay
• onPlaying
• onProgress
• onRateChange
• onSeeked
• onSeeking
• onStalled
• onSuspend
• onTimeUpdate
• onVolumeChange
• onWaiting

指针事件（Pointer）

• onPointerDown
• onPointerMove
• onPointerUp
• onPointerCancel
• onGotPointerCapture
• onLostPointerCapture
• onPointerEnter
• onPointerLeave
• onPointerOver
• onPointerOut

复合事件（Composition）

• onCompositionEnd
• onCompositionStart
• onCompositionUpdate

通用事件（Universal）

• onError
• onLoad

其他事件（Other）

• onToggle