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'));