学习如何在React应用程序中与事件互动
React提供了一种简单的方法来管理事件。准备告别addEventListener 。
在之前关于状态的文章中，你看到了这个例子。
const CurrencySwitcher = props => {
return (
<button onClick={props.handleChangeCurrency}>
Current currency is {props.currency}. Change it!
</button>
)
}
如果你已经使用了一段时间的JavaScript，这就像普通的JavaScript事件处理程序，只是这次你是在JavaScript中定义所有的东西，而不是在你的HTML中，而且你传递的是一个函数，而不是一个字符串。
实际的事件名称有点不同，因为在React中，你对所有东西都使用camelCase，所以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 ，除非你把方法定义为箭头函数。
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
- 粘贴时
组合
- 合成结束
- 合成开始
- 更新构图
键盘
- 按键
- 按键
- 按键上升
焦点
- 焦点
- 模糊
形状
- 变化
- 输入时
- 提交
鼠标
- 点击
- 上下文菜单
- 双击
- 拖动
- 拖动结束
- 拖动进入
- 拖动退出
- 拖动离开
- 拖动结束
- 拖动开始
- 下拉
- 鼠标下移
- 鼠标进入
- 鼠标离开
- 鼠标移动
- 鼠标移出
- 鼠标上
- 鼠标向上
选择
- 选择
触摸
- 触摸取消
- 触摸结束
- 触摸移动
- 触摸开始
用户界面
- 滚动
鼠标滚轮
- 轮子
媒体
- 暂停
- 可以播放
- 可以穿越播放
- 时间改变
- 暂停播放
- 加密
- 结束
- 错误
- 装载的数据
- 已加载的元数据（onLoadedMetadata
- 在加载开始时
- 暂停
- 播放
- 播放中
- 进展中
- 速率变化
- 寻找中
- 寻找中
- 搁置
- 暂停
- 时间更新
- 销量变化时
- 等待中
图片
- 加载时
- 错误时
动画
- 动画开始时
- 动画结束
- 动画迭代
过渡
- 转场结束
