反应事件

了解如何与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变成onClickonsubmit变成onSubmit

作为参考,这是旧式HTML,其中混合了JavaScript事件:

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

事件处理程序

按照惯例,将事件处理程序定义为Component类的方法:

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

所有处理程序都会接收跨浏览器遵守的事件对象W3C UI事件规范

装订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) {}
}

活动参考

支持许多事件,这是摘要列表。

剪贴板

作品

键盘

重点

形式

老鼠

选拔

触碰

用户界面

鼠标滚轮

媒体

图像

动画片

过渡

免费下载我的反应手册


更多反应教程: