React 事件处理

1. React 事件处理的基本概念

React 事件处理的特点：

• 驼峰命名法：事件名采用驼峰命名法，如 onClick、onChange。
• JSX 语法：事件处理函数通过 JSX 传递给元素，如 <button onClick={handleClick}>。
• 合成事件：React 使用合成事件（SyntheticEvent）封装原生事件，提供统一的 API。

2. 事件绑定的基本用法

2.1 绑定事件处理函数

function Button() {
  function handleClick() {
    console.log('Button clicked!');
  }

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

代码解析：

• handleClick：事件处理函数。
• onClick={handleClick}：将 handleClick 函数绑定到按钮的 onClick 事件。

2.2 直接在 JSX 中使用箭头函数 

function Button() {
  return (
    <button onClick={() => console.log('Button clicked!')}>
      Click me
    </button>
  );
}

代码解析：

• onClick={() => console.log('Button clicked!')}：直接在 JSX 中使用箭头函数定义事件处理逻辑。

3. 传递参数给事件处理函数

如果需要将参数传递给事件处理函数，可以使用箭头函数。

代码示例

function Button({ id, name }) {
  function handleClick(id, name) {
    console.log(`Button ${id} clicked by ${name}`);
  }

  return (
    <button onClick={() => handleClick(id, name)}>
      Click me
    </button>
  );
}

代码解析：

• onClick={() => handleClick(id, name)}：通过箭头函数传递参数 id 和 name。

4. 事件对象（SyntheticEvent）

React 的事件处理函数会接收一个 SyntheticEvent 对象，它是 React 封装的原生事件对象。

代码示例

function Input() {
  function handleChange(event) {
    console.log('Input value:', event.target.value);
  }

  return (
    <input type="text" onChange={handleChange} />
  );
}

代码解析：

• event.target.value：通过 event.target 获取输入框的当前值。
• onChange={handleChange}：绑定输入框的 change 事件。

5. 在类组件中处理事件

在类组件中，事件处理函数需要绑定 this，否则函数内的 this 会丢失。

代码示例

class Button extends React.Component {
  constructor(props) {
    super(props);
    // 绑定 this
    this.handleClick = this.handleClick.bind(this);
  }

  handleClick() {
    console.log('Button clicked!');
  }

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

代码解析：

• this.handleClick = this.handleClick.bind(this)：在构造函数中绑定 this，确保 handleClick 函数内的 this 指向组件实例。

使用箭头函数避免绑定 this

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

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

代码解析：

• handleClick = () => { ... }：使用箭头函数定义方法，自动绑定 this。

6. 阻止默认行为

在 React 中，必须显式调用 event.preventDefault() 来阻止默认行为。

代码示例

function Form() {
  function handleSubmit(event) {
    event.preventDefault();
    console.log('Form submitted');
  }

  return (
    <form onSubmit={handleSubmit}>
      <button type="submit">Submit</button>
    </form>
  );
}

代码解析：

• event.preventDefault()：阻止表单的默认提交行为。

7. 事件委托与冒泡

React 的事件处理遵循 DOM 事件冒泡机制，可以通过 event.stopPropagation() 阻止事件冒泡。

代码示例

function Parent() {
  function handleParentClick() {
    console.log('Parent clicked');
  }

  function handleChildClick(event) {
    event.stopPropagation();
    console.log('Child clicked');
  }

  return (
    <div onClick={handleParentClick}>
      <button onClick={handleChildClick}>Click me</button>
    </div>
  );
}

代码解析：

• event.stopPropagation()：阻止事件冒泡到父元素。

8. 事件处理中的性能优化

在事件处理中，避免在每次渲染时创建新的函数实例，可以使用 useCallback 钩子缓存函数。

代码示例

function Button() {
  const handleClick = React.useCallback(() => {
    console.log('Button clicked!');
  }, []);

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

代码解析：

• useCallback：缓存事件处理函数，避免在每次渲染时重新创建。

9. 常见事件列表

以下是 React 中常见的事件：

• 鼠标事件：onClick、onDoubleClick、onMouseEnter、onMouseLeave、onMouseMove。
• 键盘事件：onKeyDown、onKeyPress、onKeyUp。
• 表单事件：onChange、onSubmit、onFocus、onBlur。
• 触摸事件：onTouchStart、onTouchMove、onTouchEnd。

10. 总结

React 的事件处理与原生 JavaScript 事件处理非常相似，但有以下特点：

• 驼峰命名法：如 onClick、onChange。
• 合成事件：使用 SyntheticEvent 封装原生事件。
• 绑定方式：可以通过箭头函数或显式绑定 this。