React如何实现输入框失焦时自动发送API更新请求

该需求完全可以实现，不需要引入额外第三方依赖，用React原生事件能力就能完成。你之前遇到的问题本质是事件选型错误：react-offclick这类库的设计场景是弹窗、下拉菜单点击外部关闭，会全局监听点击事件，天然不匹配输入框编辑完成触发提交的需求；而onChange即时触发不符合编辑完成再提交的交互预期，属于触发时机选错。

核心触发逻辑不要用全局点击监听，直接用表单控件原生的blur（失焦）事件即可，这个事件会在输入框失去激活状态时自动触发，覆盖点击外部、Tab键切换、窗口切换等所有失焦场景，不会出现点任意位置都触发请求的问题。
具体实现按以下步骤走：

• 移除所有基于react-offclick的全局点击监听逻辑，这类库和当前场景不适配，没必要保留。
• 给每一个需要自动提交的输入控件（input、textarea、select等）单独绑定onBlur事件，不要把事件绑定在整个表单容器上，避免切换表单内其他控件时误触发。
• 加初始值缓存逻辑：输入框挂载时存一份初始值，触发onBlur时先对比当前输入值和缓存的初始值，只有值确实发生变更时才走提交逻辑，避免用户点进输入框没改内容就发无效请求。
• 增加防抖+重聚焦取消逻辑：失焦后延迟300ms左右再发请求，如果这期间用户重新聚焦回当前输入框，就取消本次待发送的请求，避免用户误点外部马上切回来时发错请求。

import { useState, useRef, useCallback } from 'react'

function AutoSubmitField({ initialValue, submitApi }) {
  // 用ref缓存初始值，不触发重渲染
  const lastSubmittedValue = useRef(initialValue)
  const [fieldValue, setFieldValue] = useState(initialValue)
  const submitTimer = useRef(null)

  const handleBlur = useCallback(() => {
    // 先清掉上一次未执行的提交定时器
    if (submitTimer.current) clearTimeout(submitTimer.current)
    // 值无变化直接终止逻辑
    if (fieldValue.trim() === lastSubmittedValue.current.trim()) return
    // 延迟提交，给用户留回退空间
    submitTimer.current = setTimeout(async () => {
      await submitApi(fieldValue)
      // 提交成功后更新缓存值，避免重复提交
      lastSubmittedValue.current = fieldValue
    }, 300)
  }, [fieldValue, submitApi])

  const handleFocus = useCallback(() => {
    // 重新聚焦时取消待发送的请求
    if (submitTimer.current) {
      clearTimeout(submitTimer.current)
      submitTimer.current = null
    }
  }, [])

  return (
    <input
      value={fieldValue}
      onChange={(e) => setFieldValue(e.target.value)}
      onBlur={handleBlur}
      onFocus={handleFocus}
    />
  )
}

• 不要用全局click事件判断失焦：点击外部只是失焦的触发场景之一，用原生blur事件才能覆盖所有用户正常操作下的失焦场景，兼容性更好。
• 多输入框场景不要做表单级的统一失焦监听，每个字段单独处理提交逻辑，避免字段间切换时重复触发无效请求。
• 如果表单字段较多，建议给提交逻辑加请求时序兜底，避免后发的请求先返回导致旧值覆盖新值的问题。

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