javascript - 反应功能组件中的事件监听器
问题描述
本质上,我有这个功能组件,但我正在努力将监听器添加到这个组件,因为现在它会进入整个窗口。我尝试使用 useRef,但这不起作用。有任何想法吗?
const AddReply =({item })=> {
const {replies, setReplies, artists, setArtists, messages, setMessages, songs, setSongs, posts, setPosts, likes, setLikes, user, setUser, accesstoken, setAccesToken, refreshtoken, setRefreshtoken} = React.useContext(InfoContext);
const refKey = useRef();
function eventhandler(e) {
if (e.code === 'Enter') {
handleSubmitReply();
console.log("Works");
}
}
function handleSubmitReply(){
console.log(document.getElementById("textareareply").value);
const likesref=dbLikes.push(0);
const likeskey=likesref.getKey();
console.log("Likes key is ", likeskey);
const ref = dbReplies.child(item['replies']).push({
'content':document.getElementById("textareareply").value,
'posterid': user.id,
'likes': likeskey,
"createdAt": {'.sv': 'timestamp'}
});
}
useEffect(() => {
// if I were to use useRef, then I tried using ref.current,
// but then I got that "TypeError: refKey.current.addEventListener
// is not a function".
window.addEventListener("keyup", eventhandler);
return () => {
window.removeEventListener("keyup", eventhandler);
};
}, []);
return(
<div>
<TextArea id="textareareply" ref={refKey} rows={1} placeholder='Reply to post' />
<Form.Button fluid positive onClick = {()=>handleSubmitReply()} style={{marginTop:"10px"}}>Reply</Form.Button>
</div>
)}
export default AddReply;```
解决方案
你的useRef
不起作用可能是因为<TextArea>
它是一个功能组件,所以不能使用ref
. 相反,附加ref
到容器:
<div ref={refKey}>
<TextArea id="textareareply" rows={1} placeholder='Reply to post' />
<Form.Button fluid positive onClick = {()=>handleSubmitReply()}
style={{marginTop:"10px"}}>Reply</Form.Button>
</div>
然后您现在可以将事件附加到它:
useEffect(() => {
const div = refKey.current;
div.addEventListener("keyup", eventhandler);
return () => {
div.removeEventListener("keyup", eventhandler);
};
}, []);
那应该可以解决您的问题,但是如果您仍然更喜欢当前的监听方式window
,useRef
那么只需将逻辑添加到事件处理程序以仅对您的组件起作用:
function eventhandler(e) {
if (e.target.getAttribute('id') === 'textareareply') {
if (e.code === 'Enter') {
console.log("Works");
}
}
}
推荐阅读
- swift - Swift 中的类型检查是如何工作的
- javascript - 优化搜索列以匹配多个子字符串的 Google Apps 脚本
- python - 网络抓取程序将随机不起作用 - 返回空列表
- ssl - NGINX + Let's encrypt:无法自动找到匹配的服务器块
- mysql - 为什么在mysql中创建用户语法中需要撇号
- python - Python中的希尔伯特矩阵
- c# - 在 C# 中,比较两个图像时,想使用 XML 图像模型而不是像素
- javascript - 字面画布官方示例“导出图像”不起作用
- postgresql - postgresql - 列必须出现在 GROUP BY 子句中或在聚合函数中使用。但我不想做这两件事
- c# - 如何处理 UI 线程更新 C# Xamarin.Froms