To call a function method when enter is being clicked-CodePudding

I want to call this function whenever enter is beign clicked , do i need to pass an event here. please help me thanks in advance

function handleSendMessage(socketId, mesg, clientMessage) {
  console.log("calling this metho", socketId, mesg);   
}

<WaitingRoom handleSendMessage={handleSendMessage} />

WaitingRoom component:-

  const WaitingRoom = ({waitRoom, handleSendMessage}) => {

   function handleMessage (socketId, msg) {
     console.log('chat open clicked', socketId, msg)
    handleSendMessage(socketId, msg)
  }

return (
<Grid item xs={12} lg={4} className={classes.root}>
  <Card className={classes.cardTop}>
    <h1>Room</h1>
  </Card>
  { [...new Set(waitRoom)].map((data) => 
    ( data.customerName.length >=  1)
      ? <WaitinRoomCardListItem
      handleMessage={handleMessage}
    ></WaitinRoomCardListItem>
    : null
  )}
  <Card className={classes.cardBottom}></Card>
</Grid>
 )
 }

 export default WaitingRoom

CodePudding user response：

Let's start! Declare an event listener in useEffect. Remember to unsubscribe from the event listener on deinitialization. Wrap the handlers in useCallback to prevent unnecessary re-render, but don't forget about their dependencies if they appear.

In the useEffect, we declare an event listener for the "keydown" event. As the first parameter the event that is being processed, in the second parameter we pass the event handler.

We will also create an event handler called handleKeyDown. Inside it, we will indicate the logic that allows you to call the function only at the moment of pressing the enter.

Also, you can define handleKeyDown inside the useEffect and then you do not have to specify it in the useEffect dependencies.

//Start coding!
import React, { useCallback, useEffect } from 'react'


const handleSendMessage = 
    useCallback((socketId, mesg, clientMessage) => {
            console.log("calling this metho", socketId, mesg);   
    }, [])

<WaitingRoom onSendMessage={handleSendMessage} />

// WaitingRoom component
const WaitingRoom = ({ waitRoom, onSendMessage }) => {
  const handleKeyDown = useCallback(
    event => {
      const key = event.key || event.keyCode

      if (key === 'enter' || key === 13) {
        onSendMessage()
      }
    },
    [onSendMessage],
   )

  useEffect(() => {
    window.addEventListener('keydown', handleKeyDown)

    return () => {
      window.removeEventListener('keydown', handleKeyDown)
    }
  }, [handleKeyDown])

  return (
    <Grid item xs={12} lg={4} className={classes.root}>
      <Card className={classes.cardTop}>
        <h1>Room</h1>
      </Card>
      {[...new Set(waitRoom)].map(
        data => data.customerName.length >= 1 
                ? <WaitinRoomCardListItem /> 
                : null,
      )}
      <Card className={classes.cardBottom} />
    </Grid>
  )
}

export default WaitingRoom

If the component has no children, you can declare the components in a shorter form.

// before
<WaitinRoomCardListItem
  handleMessage={handleMessage}
></WaitinRoomCardListItem>

// after
<WaitinRoomCardListItem handleMessage={handleMessage} />

CodePudding user response：

You need to add onKeyDown event and inside the event, fetch the e which is equal to the event. Then applay a check for e.key =="enter", if the return is true, enter key will be triggered