「回顾 2022，展望 2023，我正在参与2022 年终总结征文大赛活动」

概念

JSX 中添加 事件处理函数

使用

基本使用

export default function Button() {
  function handleClick() {
    alert('你点击了我！');
  }

  return (
    <button onClick={handleClick}>
      点我
    </button>
  );
}

<button onClick={() => {
  alert('你点击了我！');
}}>

传递参数

export default function Toolbar() {
  function handlePlayClick(e, id) {
    console.log(e.target.value, id);
  }
  return (
    <>
      <label for="input">输入框：</label>
      <input  id="input" onChange={(e)=>{
        handlePlayClick(e,'id')
      }} />
    </>
  );
}

将事件处理函数作为 props 传递

function Button({ onClick, children }) {
  return (
    <button onClick={onClick}>
      {children}
    </button>
  );
}

export default function Toolbar() {
  function handlePlayClick() {
    alert(`正在播放`);
  }
   return (
    <Button onClick={handlePlayClick}>
      播放
    </Button>
  );
}

命名

事件处理函数有如下特点:

• 通常在你的组件 内部 定义。
• 名称以 handle 开头，后跟事件名称。

事件处理函数 props 应该以 on 开头，后跟一个大写字母。

注意

事件传播

在 React 中所有事件都会传播，除了 onScroll，它仅适用于你附加到的 JSX 标签。

function Button({ onClick, children }) {
  return (
    <button onClick={e => {
      e.stopPropagation();
      onClick();
    }}>
      {children}
    </button>
  );
}

export default function Toolbar() {
  return (
    <div className="Toolbar" onClick={() => {
      alert('你点击了 toolbar ！');
    }}>
      <Button onClick={() => alert('正在播放！')}>
        播放电影
      </Button>
      <Button onClick={() => alert('正在上传！')}>
        上传图片
      </Button>
    </div>
  );
}

捕获阶段事件

极少数情况下，你可能需要捕获子元素上的所有事件，即便它们阻止了传播

以通过在事件名称末尾添加 Capture 来实现

<div onClickCapture={() => { /* 这会首先执行 */ }}>
  <button onClick={e => e.stopPropagation()} />
  <button onClick={e => e.stopPropagation()} />
</div>

每个事件分三个阶段传播：

1. 它向下传播，调用所有的 onClickCapture 处理函数。
2. 它执行被点击元素的 onClick 处理函数。
3. 它向上传播，调用所有的 onClick 处理函数。