React函数组件中用addEventListener实现引号自动补全的问题

一、React中用原生DOM操作合规吗？ #

完全没问题，但得留意几个关键点：

• 必须等DOM节点挂载完成后（用带空依赖数组的useEffect）再添加监听，别操作还没渲染出来的元素
• 组件卸载时一定要移除监听，防止内存泄漏
• 如果是受控组件，操作DOM后必须同步更新React状态，不然会出现DOM内容和React状态不一致的情况

二、TypeScript错误的根源 #

你写的监听函数报错，核心是事件类型没指定对：

• 默认的Event类型里，target是EventTarget类型，根本没有value、selectionStart这些输入框专属的属性
• 得把事件类型显式声明为KeyboardEvent<HTMLInputElement>，TypeScript才能正确识别event.target是输入框元素，访问那些属性就不会报错了

三、正确的实现代码 #

import { useEffect, useRef } from 'react';

const QuoteAutoCompleteInput = () => {
  const inputRef = useRef<HTMLInputElement>(null);

  useEffect(() => {
    const input = inputRef.current;
    if (!input) return;

    const handleKeyDown = (e: KeyboardEvent<HTMLInputElement>) => {
      const { key } = e;
      // 只处理单引号和双引号
      if (key !== "'" && key !== '"') return;

      // 阻止默认输入，避免系统自动插入单个引号
      e.preventDefault();
      
      const { value, selectionStart, selectionEnd } = e.target;
      if (selectionStart === null || selectionEnd === null) return;

      // 拼接新内容：把一对引号插入到光标位置
      const newValue = 
        value.slice(0, selectionStart) + 
        key + key + 
        value.slice(selectionEnd);
      
      // 更新输入框内容
      e.target.value = newValue;
      // 把光标移到两个引号中间
      e.target.selectionStart = e.target.selectionEnd = selectionStart + 1;

      // 如果是受控组件，这里要同步更新状态
      // 比如你有个onChange回调：onChange(newValue);
    };

    input.addEventListener('keydown', handleKeyDown);
    // 组件卸载时清理监听
    return () => input.removeEventListener('keydown', handleKeyDown);
  }, []);

  return <input ref={inputRef} type="text" />;
};

export default QuoteAutoCompleteInput;

四、几个重要提醒 #

• 用keydown事件而非input/keypress：keydown能在字符插入到输入框前拦截操作，避免先插入单个引号再修改，减少和React状态的冲突
• 受控组件必须同步状态：如果输入框的value是由React状态控制的，修改DOM后一定要调用onChange更新状态，不然React下次渲染会把DOM内容覆盖回去
• 光标位置要紧跟内容修改：必须在设置完value后立刻调整selectionStart和selectionEnd，不然光标会自动跳到输入框末尾

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