如何在 React 中单击输入时清除文本区域？答案

【问题标题】：How to clear textarea on click enter in React?如何在 React 中单击输入时清除文本区域？
【发布时间】：2021-04-06 21:51:25
【问题描述】：

我有一个带有文本区域的聊天组件，允许在按下“输入”键时发送消息。它可以工作，但 textarea 没有完全重置。它的值是空的，但是有一个新的空行，这妨碍了占位符的显示。

代码如下：

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

  const onSendMessage = () => {
    if (newMessage.length > 1) {
      onSend(newMessage);
      setIsWritting(false);
      setNewMessage("");
    }
    return undefined;
  };

 const onPressEnter = ({ key }) => {
   if (key === "Enter") {
     onSendMessage();
     return false;
   }
 };

useEffect(() => {
  document.addEventListener("keydown", onPressEnter);
  return () => document.removeEventListener("keydown", onPressEnter);
}, [onPressEnter]);

我基于此线程在onPressEnter 中写了return false：Clear textarea input after enter key press。我也尝试添加事件以阻止添加新空行的默认行为，但到目前为止没有成功。

如何解决这个问题？

还有没有办法只听“输入”keydown 事件而不是全局听所有键？

【问题讨论】：

标签： reactjs textarea

【解决方案1】：

不需要addEventListener，您可以直接在文本区域级别添加您的事件。我把 onKeyUp 而不是 onKeyDown 因为第二个将在输入更改之前运行，它不会对您的情况产生很大影响，但请记住它们不一样。

<textarea onKeyUp={onPressEnter}></textarea>

【讨论】：

【解决方案2】：

请在此处参考我对您上传的代码所做的更改： https://codesandbox.io/s/stackoverflowcomquestions65506172-ozenl

几个变化：

输入textarea组件可以是controlled component，这样我们就可以很方便的清空值了。
我们可以使用组件式 React keyboard events 代替全局事件绑定。
使用event.preventDefault() 到prevent Enter behavior 被处理，在你的情况下阻止新行。

【讨论】：