React 事件

定义和使用

就像 HTML 一样，React可以根据用户事件执行操作。

React 具有与 HTML 相同的事件：单击，更改，鼠标悬停等。

React 事件使用 camelCase 语法编写：

onClick 而不是 onclick。

React 事件处理程序写在花括号内：

onClick = {shoot} 而不是 onClick = "shoot()"。

<button onClick={shoot}>单击我试试</button>

尝试一下

事件处理程序

一个好的做法是将事件处理程序作为方法放在组件类中：

class Football extends React.Component {
  shoot() {
    alert("Hello!");
  }
  render() {
    return (
      <button onClick={this.shoot}>单击我试试</button>
    );
  }
}

ReactDOM.render(<Football />, document.getElementById('root'));

尝试一下

绑定 this

对于 React 中的方法，this 关键字应代表拥有该方法的组件。

这就是为什么您应该使用箭头功能。使用箭头功能，它将始终代表定义了箭头功能的对象。

class Football extends React.Component {
  shoot = () => {
    alert(this); //"this" 关键字引用组件对象
  }
  render() {
    return (
      <button onClick={this.shoot}>单击我试试</button>
    );
  }
}

ReactDOM.render(<Football />, document.getElementById('root'));

尝试一下

在类组件中，默认情况下未定义 this 关键字，因此在常规函数中，this 关键字表示调用该方法的对象，该对象可以是全局窗口对象，HTML 按钮或其他内容。

如果必须使用常规函数而不是箭头函数，则必须使用 bind() 方法将其绑定到组件实例：

通过将其绑定到构造函数中，使其可以在 shoot 函数中使用：

class Football extends React.Component {
  constructor(props) {
    super(props)
    this.shoot = this.shoot.bind(this)
  }
  shoot() {
    //由于构造函数中的绑定，"this" 关键字现在指向组件对象
    alert(this);
  }
  render() {
    return (
      <button onClick={this.shoot}>单击我试试</button>
    );
  }
}

ReactDOM.render(<Football />, document.getElementById('root'));

尝试一下

注意，没有绑定，this 关键字将返回 undefined。

传递参数

如果要将参数发送到事件处理程序中，则有两个选择：

1.制作一个匿名箭头功能：

class Football extends React.Component {
  shoot = (a) => {
    alert(a);
  }
  render() {
    return (
      <button onClick={() => this.shoot("Goal")}>单击我试试!</button>
    );
  }
}

ReactDOM.render(<Football />, document.getElementById('root'));

尝试一下

2.将事件处理程序绑定 this。

注意，第一个参数必须是 this。

class Football extends React.Component {
  shoot = (a) => {
    alert(a);
  }
  render() {
    return (
      <button onClick={this.shoot.bind(this, "Goal")}>单击我试试!</button>
    );
  }
}

ReactDOM.render(<Football />, document.getElementById('root'));

尝试一下

请注意第二个示例：如果在不使用 bind 方法的情况下发送参数（this.shoot（this，“Goal”）而不是 this.shoot.bind（this，“Goal”）），则在以下情况下将执行 shoot 函数页面被加载，而不是等待按钮被点击。

事件对象

事件处理程序可以访问触发该函数的 React 事件。

在我们的示例中，该事件是 "click" 事件。请注意，无论是否使用箭头功能，语法都不同。

使用箭头功能，您必须手动发送事件参数：

class Football extends React.Component {
  shoot = (a, b) => {
    alert(b.type); //"b"代表触发该函数的React事件，在这种情况下，“点击”事件
  }
  render() {
    return (
      <button onClick={(ev) => this.shoot("Goal", ev)}>单击我试试!</button>
    );
  }
}

ReactDOM.render(<Football />, document.getElementById('root'));

尝试一下

如果没有箭头功能，则使用 bind() 方法时，React 事件对象将作为最后一个参数自动发送：

class Football extends React.Component {
  shoot = (a, b) => {
    alert(b.type); //"b"代表触发该函数的React事件，在这种情况下，“点击”事件
  }
  render() {
    return (
      <button onClick={this.shoot.bind(this, "Goal")}>单击我试试!</button>
    );
  }
}

ReactDOM.render(<Football />, document.getElementById('root'));

尝试一下

定义和使用

事件处理程序

绑定 this

传递参数

事件对象

相关页面