反应功能组件中的事件监听器

Question

从本质上讲，我有这个 function 组件，但我正在努力将监听器添加到这个组件，因为现在它会用到整个 window。 我尝试使用 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;``` 

Answer 1

您的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);
        };
    }, []);

那应该可以解决您的问题，但是如果您仍然更喜欢在没有useRef的情况下在window上侦听的当前方式，那么只需将逻辑添加到事件处理程序以仅对您的组件起作用：

    function eventhandler(e) {
        if (e.target.getAttribute('id') === 'textareareply') {            
            if (e.code === 'Enter') {
                console.log("Works");
            }
        }
    }

Answer 2

当我们使用功能组件时，我们直接将 function 引用传递给 DOM 事件属性，例如：

function AddReply() {
    
    function handleButtonClick(event) {
        console.log(event)
    }

    return (
        <button onClick={handleButtonClick}> Click Here </button>
    );
}