随笔- 245 文章- 0 评论- 10 阅读- 47万

react事件命名

export default function Button() {
  function handleClick() {
    alert('你点击了我！');
  }
 
  return (
    <button onClick={handleClick}>
      点我
    </button>
  );
}

按照惯例，通常将事件处理程序命名为 handle，后接事件名。你会经常看到 onClick={handleClick}，onMouseEnter={handleMouseEnter} 等。

命名事件处理函数 prop

内置组件（<button> 和 <div>）仅支持浏览器事件名称，例如 onClick。但是，当你构建自己的组件时，你可以按你个人喜好命名事件处理函数的 prop。

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

例如，Button 组件的 onClick prop 本来也可以被命名为 onSmash：

function Button({ onSmash, children }) {
  return (
    <button onClick={onSmash}>
      {children}
    </button>
  );
}
 
export default function App() {
  return (
    <div>
      <Button onSmash={() => alert('正在播放！')}>
        播放电影
      </Button>
      <Button onSmash={() => alert('正在上传！')}>
        上传图片
      </Button>
    </div>
  );
}

传递给事件处理函数的函数应直接传递，而非调用。例如：
 
传递一个函数（正确）  调用一个函数（错误）
<button onClick={handleClick}>    <button onClick={handleClick()}>
区别很微妙。在第一个示例中，handleClick 函数作为 onClick 事件处理函数传递。这会让 React 记住它，并且只在用户点击按钮时调用你的函数。
 
在第二个示例中，handleClick() 中最后的 () 会在 渲染 过程中 立即 触发函数，即使没有任何点击。这是因为位于 JSX {} 之间的 JavaScript 会立即执行。
 
当你编写内联代码时，同样的陷阱可能会以不同的方式出现：
 
传递一个函数（正确）  调用一个函数（错误）
<button onClick={() => alert('...')}>  <button onClick={alert('...')}>
如果按如下方式传递内联代码，并不会在点击时触发，而是会在每次组件渲染时触发：
 
// 这个 alert 在组件渲染时触发，而不是点击时触发！
<button onClick={alert('你点击了我！')}>
如果你想要定义内联事件处理函数，请将其包装在匿名函数中，如下所示：
 
<button onClick={() => alert('你点击了我！')}>
这里创建了一个稍后调用的函数，而不会在每次渲染时执行其内部代码。
 
在这两种情况下，你都应该传递一个函数：
 
<button onClick={handleClick}> 传递了 handleClick 函数。
<button onClick={() => alert('...')}> 传递了 () => alert('...') 函数。