React实现点击切换Span与Input，点击外部或回车恢复

原代码存在的问题 #

• 未正确绑定外部点击的监听逻辑，无法通过点击输入框外部关闭编辑状态
• 直接操作DOM元素绑定事件，不符合React组件的事件处理规范
• 切换到输入框时未自动聚焦，影响用户体验
• 使用强制非空断言!，存在潜在的空值风险
• 未清理事件监听，可能导致内存泄漏

优化后的完整代码 #

import { useState, useRef, useEffect } from 'react';

const EditableTitle = () => {
  const inputRef = useRef<HTMLInputElement>(null);
  const [isSpanVisible, setIsSpanVisible] = useState(true);
  const [title, setTitle] = useState('title');

  // 关闭输入框并更新标题内容
  const handleCloseInput = (value: string) => {
    setTitle(value.trim());
    setIsSpanVisible(true);
  };

  // 监听文档点击，判断是否点击输入框外部
  const handleDocumentClick = (e: MouseEvent) => {
    if (!isSpanVisible && inputRef.current && !inputRef.current.contains(e.target as Node)) {
      handleCloseInput(inputRef.current.value);
    }
  };

  useEffect(() => {
    // 切换到输入框时，填充当前标题并自动聚焦
    if (!isSpanVisible && inputRef.current) {
      inputRef.current.value = title;
      inputRef.current.focus();
    }

    // 绑定文档点击事件
    document.addEventListener('click', handleDocumentClick);
    
    // 组件卸载或依赖更新时移除事件监听，避免内存泄漏
    return () => {
      document.removeEventListener('click', handleDocumentClick);
    };
  }, [isSpanVisible, title]);

  return (
    <div className="topInfo">
      {isSpanVisible ? (
        <span onClick={() => setIsSpanVisible(false)}>{title}</span>
      ) : (
        <input
          ref={inputRef}
          type="text"
          onKeyUp={(e) => {
            if (e.key === 'Enter') {
              handleCloseInput(e.currentTarget.value);
            }
          }}
        />
      )}
    </div>
  );
};

export default EditableTitle;

关键优化说明 #

• 外部点击监听：通过document.addEventListener绑定全局点击事件，在回调中判断点击目标是否属于输入框元素，若不属于则关闭编辑状态
• 自动聚焦：切换到输入框时自动调用focus()，让用户无需手动点击输入框即可开始编辑
• React合成事件：直接使用React的onClick、onKeyUp合成事件替代原生DOM事件绑定，更贴合React组件生命周期管理
• 类型安全与健壮性：使用可选链?.替代强制非空断言，避免空值访问报错
• 副作用清理：在useEffect的返回函数中移除事件监听，防止组件卸载后残留事件导致内存泄漏

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