框架集成：05 React事件处理与HT - 详细教程与实战指南

class MyComponent extends React.Component {
  handleClick = () => {
    // this自动绑定，简洁高效
    this.setState({ clicked: true });
  };
  render() {
    return <button onClick={this.handleClick}>Click</button>;
  }
}

class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.handleClick = this.handleClick.bind(this);
  }
  handleClick() {
    this.setState({ clicked: true });
  }
}

// 每次render都创建新函数，可能影响性能
<button onClick={() => this.handleClick()}>
  Click
</button>

// 在PureComponent中会导致不必要的重渲染

// 方式1：箭头函数传参（推荐）
<button onClick={() => handleSelectItem(item)}>
  选择
</button>

// 方式2：bind传参
<button onClick={handleSelectItem.bind(null, item)}>
  选择(bind)
</button>

// HTML方式：return false
<a href="url" onclick="return false;">链接</a>

// React方式：e.preventDefault()
<a href="url" onClick={(e) => {
  e.preventDefault(); // 阻止跳转
}}>链接</a>

// dragover必须preventDefault，否则不会触发drop
onDragOver={(e) => {
  e.preventDefault(); // 关键！
}}
onDrop={(e) => {
  e.preventDefault();
  const files = e.dataTransfer.files;
}}

// React 17+ 事件委托机制：
// 所有事件都绑定到root节点，而不是每个元素

// 等效的原生实现：
rootNode.addEventListener('click', function(e) {
  // 根据e.target找到对应的React组件
  // 调用组件中定义的事件处理函数
});

// 优势：
// 1. 减少事件监听器数量
// 2. 动态添加/删除元素无需绑定/解绑事件
// 3. 统一的事件处理入口，便于优化

// 不推荐：在render中创建箭头函数
function List({ items }) {
  return (
    <ul>
      {items.map(item => (
        <li key={item.id} onClick={() => handleClick(item.id)}>
          {item.name}
        </li>
      ))}
    </ul>
  );
}

// 推荐：使用useCallback缓存函数
function List({ items }) {
  const handleClick = useCallback((id) => {
    // 处理点击
  }, []);

  return (
    <ul>
      {items.map(item => (
        <li key={item.id} onClick={() => handleClick(item.id)}>
          {item.name}
        </li>
      ))}
    </ul>
  );
}

// 不推荐：阻止事件冒泡和默认行为的顺序混乱
function BadHandler(e) {
  e.stopPropagation();
  e.preventDefault();
  // 逻辑混乱
}

// 推荐：明确意图
function GoodHandler(e) {
  e.preventDefault();   // 阻止默认行为
  e.stopPropagation();  // 阻止事件冒泡
  // 业务逻辑
}

// 不推荐：滥用内联事件处理
<button onClick={(e) => { e.preventDefault(); doSomething(); doAnotherThing(); }}>复杂操作</button>

// 推荐：提取为命名函数
function handleSubmit(e) {
  e.preventDefault();
  doSomething();
  doAnotherThing();
}
<button onClick={handleSubmit}>复杂操作</button>