如何解决如何在React中单击进入时清除textarea?
我有一个带有文本区域的聊天组件,可以在按下“输入”键时发送消息。它有效,但 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]);
我基于此线程在 return false
中编写了 onPressEnter
:Clear textarea input after enter key press。我还尝试添加事件以阻止添加新空行的默认行为,但到目前为止没有成功。
如何解决这个问题?
还有没有办法只监听“输入”keydown 事件而不是全局监听所有键?
解决方法
无需 addEventListener
,您可以直接在 textarea 级别添加事件。我把 onKeyUp 而不是 onKeyDown 因为第二个将在输入更改之前运行,它不会对您的情况产生太大影响,但请记住它们不相同。
<textarea onKeyUp={onPressEnter}></textarea>
,
请在此处参考我对您上传的代码所做的更改: https://codesandbox.io/s/stackoverflowcomquestions65506172-ozenl
几个变化:
- 输入
textarea
组件可以是 controlled component,以便我们可以轻松清除该值。 - 我们可以使用组件化的 React keyboard events 而不是全局事件绑定。
- 使用
event.preventDefault()
来处理 prevent Enter behavior,在您的情况下防止换行。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。