面试题：React组件中如何绑定和处理点击事件

Question

在一个简单的React组件中，有一个按钮元素，要求实现当点击按钮时，控制台打印出'按钮被点击了'，请写出对应的代码，并解释事件绑定和处理函数的原理。

Answer 1

代码实现

import React, { Component } from 'react';

class ButtonComponent extends Component {
  handleClick = () => {
    console.log('按钮被点击了');
  }

  render() {
    return (
      <button onClick={this.handleClick}>
        点击我
      </button>
    );
  }
}

export default ButtonComponent;

事件绑定和处理函数原理解释

1. 事件绑定：在React中，使用 onClick 这样的属性来绑定事件。这里 onClick 是React合成事件系统的一部分，React将浏览器原生事件包装成合成事件，以实现跨浏览器兼容性和性能优化。当按钮被点击时，React会识别到 onClick 属性，并调用与之关联的函数。
2. 处理函数： handleClick 是一个箭头函数，作为 onClick 的值。箭头函数在这里绑定到组件实例的 this，确保函数内部的 this 指向组件实例。当按钮点击事件触发，handleClick 函数被调用，从而执行 console.log('按钮被点击了') 语句，在控制台输出相应信息。