React TextArea组件如何实现按下回车键时在新行前添加#/$等前缀符号

核心思路 #

• 给textarea绑定onKeyDown事件拦截回车键，阻止默认换行行为
• 通过ref获取textarea DOM实例，读取当前光标所在位置，将原有内容拆分为光标前、光标后两段
• 拼接新内容时在换行符后追加指定前缀，同时手动调整光标位置到前缀末尾，保证输入体验

完整实现代码 #

import React from 'react';
import ReactDOM from 'react-dom';

const MyComponent = () => {
  const [name, setName] = React.useState('');
  const textareaRef = React.useRef(null);
  // 自定义行首前缀，可直接替换为你需要的$、#、%等符号
  const LINE_PREFIX = '$';

  const handleKeyDown = (e) => {
    // 仅拦截回车键
    if (e.key !== 'Enter') return;
    e.preventDefault();
    const textarea = textareaRef.current;
    const cursorStart = textarea.selectionStart;
    const cursorEnd = textarea.selectionEnd;

    // 拆分内容为光标前后两部分
    const beforeCursor = name.slice(0, cursorStart);
    const afterCursor = name.slice(cursorEnd);

    // 拼接新内容：原有前半部分 + 换行 + 前缀 + 原有后半部分
    const newValue = `${beforeCursor}\n${LINE_PREFIX}${afterCursor}`;
    setName(newValue);

    // 等状态更新后将光标移动到前缀末尾，方便用户直接输入
    setTimeout(() => {
      textarea.selectionStart = textarea.selectionEnd = cursorStart + 1 + LINE_PREFIX.length;
    }, 0);
  };

  return (
    <div>
      <textarea
        ref={textareaRef}
        value={name}
        onChange={(e) => setName(e.target.value)}
        onKeyDown={handleKeyDown}
        rows={10}
        cols={50}
      />
    </div>
  );
}

ReactDOM.render(<MyComponent />, document.getElementById('root'));

自定义调整说明 #

• 如果需要实现继承上一行的前缀（比如上一行是%开头，回车自动加%），可以在拦截回车后，从光标前的内容中提取最后一个换行符后的前缀，替换固定的LINE_PREFIX即可
• 如果需要支持选中多行批量添加前缀，可以额外处理cursorStart和cursorEnd不一致的场景，遍历选中的每行内容统一添加前缀即可

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