ReactJS 事件

在ReactJS中，事件处理与原生JavaScript类似，但ReactJS采用了一种更为紧凑和可读性更好的语法。事件处理的本质是在组件内部触发函数调用，并可以将数据通过事件对象传递给处理程序。 ReactJS提供了一些内置的事件处理程序，我们也可以自定义事件处理程序来响应特定的场景。

组件事件

ReactJS中的事件处理程序通常被添加到组件上，并通过JSX来绑定到相应的DOM事件。

import React from 'react';

class MyComponent extends React.Component {
  
  handleClick = () => {
    console.log('Button clicked!');
  }

  render() {
    return (
      <button onClick={this.handleClick}>Click me</button>
    );
  }
}

在上面的代码中，我们定义了一个按钮点击事件处理程序，并将其绑定到相应的DOM元素上。

事件对象

ReactJS事件处理程序的一大优势是可以访问事件对象。 事件对象包含有关事件本身的所有信息，例如事件的类型，目标和位置等。

import React from 'react';

class MyComponent extends React.Component {
  
  handleClick = (event) => {
    console.log('Button clicked!', event.target);
  }

  render() {
    return (
      <button onClick={this.handleClick}>Click me</button>
    );
  }
}

在上面的代码中，我们传递event参数给点击事件处理程序，并使用event.target打印出按钮实例。

防止默认操作

在ReactJS中，可以通过调用event.preventDefault()方法来防止浏览器执行默认操作。例如，阻止表单提交，阻止链接导航等。

import React from 'react';

class MyComponent extends React.Component {
  
  handleClick = (event) => {
    event.preventDefault();
    console.log('Link clicked, but prevented the default action!');
  }

  render() {
    return (
      <a href="/" onClick={this.handleClick}>Click me</a>
    );
  }
}

自定义事件

除了使用ReactJS提供的内置事件外，我们还可以自定义事件。

import React from 'react';

class MyComponent extends React.Component {
  
  handleClick = () => {
    const event = new CustomEvent('my-event', { detail: { message: 'Hello world!' }});
    window.dispatchEvent(event);
  }

  componentDidMount() {
    window.addEventListener('my-event', (event) => {
      console.log('Message:', event.detail.message);
    });
  }

  render() {
    return (
      <button onClick={this.handleClick}>Click me</button>
    );
  }
}

在上面的代码中，我们创建了一个自定义事件my-event，并将其作为全局对象的子元素分派到window。我们还在组件挂载后添加了一个对my-event的监听器，并在事件处理程序中打印事件详细信息。