React中按下回车键清空textarea残留空行问题及优化方法

我来帮你搞定这两个问题——首先是回车后残留空行导致placeholder不显示的问题，然后是把全局按键监听改成只针对textarea的局部监听，这样更优雅也更高效。

问题根源分析 #

你之前用全局document.addEventListener监听按键，当按下回车时，浏览器已经先给textarea执行了添加空行的默认行为，之后事件才冒泡到document层面，这时候再return false已经没法阻止之前发生的默认行为了，所以textarea里会留下空行。另外全局监听会影响页面上其他所有元素的按键事件，完全没必要。

修复方案 #

1. 移除全局监听，改为直接给Textarea绑定按键事件

把原来的useEffect全局监听代码删掉，直接在你的textarea组件上添加onKeyDown属性，这样只会监听这个textarea的按键操作，不会干扰页面上其他元素。

2. 正确阻止回车的默认行为

在onPressEnter函数里，调用event.preventDefault()来阻止浏览器给textarea添加空行的默认行为，React的合成事件体系里，preventDefault()是更可靠的阻止默认行为的方式，比return false更稳定。

修改后的完整代码示例 #

const [newMessage, setNewMessage] = useState("");

const onSendMessage = () => {
  // 改成trim()判断，避免用户只输入空格就发送的无效消息
  if (newMessage.trim().length > 0) {
    onSend(newMessage);
    setIsWritting(false);
    setNewMessage("");
  }
};

// 修改按键处理函数，直接接收事件对象
const onPressEnter = (e) => {
  if (e.key === "Enter") {
    e.preventDefault(); // 关键：阻止回车添加空行的默认行为
    onSendMessage();
  }
};

// 删掉原来的全局监听useEffect代码

// 在你的textarea JSX中绑定onKeyDown事件
return (
  <textarea
    value={newMessage}
    onChange={(e) => setNewMessage(e.target.value)}
    onKeyDown={onPressEnter}
    placeholder="输入消息..."
  />
);

额外优化建议 #

如果需要支持Shift+Enter换行的常用功能，可以修改判断逻辑，让普通回车发送消息，Shift+Enter保留换行：

const onPressEnter = (e) => {
  if (e.key === "Enter" && !e.shiftKey) {
    e.preventDefault();
    onSendMessage();
  }
  // 按下Shift+Enter时，不阻止默认行为，正常换行
};

这样修改后，按下回车时会直接阻止空行生成，同时清空textarea的值，placeholder就能正常显示了，而且也不会再全局监听所有按键啦。

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