React项目中如何实现用户点击输入框时触发操作日志记录？

为什么onClick无法满足需求 #

onClick仅能捕获鼠标点击输入框触发的聚焦行为，以下场景完全无法覆盖：

• 用户按Tab键切换焦点到输入框
• 业务代码主动调用focus()方法触发输入框聚焦
• 移动端页面打开时输入框自动聚焦唤起软键盘
• 无障碍读屏设备触发的输入框聚焦

推荐实现方案 #

优先使用onFocus事件实现，该事件会在输入框获得焦点时触发，覆盖所有聚焦场景，你可以根据项目表单数量选择以下两种实现方式：

方案1：单输入框绑定（适合表单数量少的项目） #

直接给每个需要埋点的表单元素绑定onFocus事件，触发上报逻辑即可：

// 通用上报方法，可单独抽离到公共工具文件
const reportInputFocus = (inputMeta) => {
  // 替换为你项目的埋点上报逻辑
  window.trackLog('input_focus', inputMeta)
}

function UserForm() {
  return (
    <form>
      <input
        name="phone"
        type="tel"
        placeholder="请输入手机号"
        onFocus={() => reportInputFocus({ name: 'phone', page: 'user_form' })}
      />
      <textarea
        name="feedback"
        placeholder="请输入反馈内容"
        onFocus={() => reportInputFocus({ name: 'feedback', page: 'user_form' })}
      />
    </form>
  )
}

方案2：全局事件捕获（适合表单数量多的大型站点） #

无需给每个输入框单独加绑定，在根组件利用事件捕获机制统一监听所有输入框的聚焦事件，减少重复代码：

function App() {
  const handleGlobalInputFocus = (e) => {
    const targetEl = e.target
    // 匹配需要上报的表单元素，可根据业务调整过滤规则
    const isValidInput = ['INPUT', 'TEXTAREA', 'SELECT'].includes(targetEl.tagName)
      && !targetEl.disabled
      && targetEl.type !== 'hidden'

    if (isValidInput) {
      // 优先读取自定义埋点属性，没有则取name/id作为输入框标识
      const trackKey = targetEl.dataset.trackKey || targetEl.name || targetEl.id
      reportInputFocus({
        track_key: trackKey,
        input_type: targetEl.type,
        page_url: window.location.pathname
      })
    }
  }

  return (
    // 用onFocusCapture开启捕获阶段监听，覆盖所有子组件的输入框聚焦事件
    <div onFocusCapture={handleGlobalInputFocus}>
      {/* 项目所有路由/页面组件 */}
      <PageRouter />
    </div>
  )
}

如果用了Ant Design、Material UI等第三方组件库的输入组件，直接给组件传入onFocus属性即可，底层已和原生focus事件做了绑定，无需额外适配。

内容的提问来源于stack exchange，提问作者Raj