onClick event for enter Button in react js

Question

Below code is working fine with button that is created in this code .but i also want to use the enter button to do same work .

<div className="input" >
      <input
        type="text"
        placeholder="Type something..."
        id="myinput"
        onChange={(e) => setText(e.target.value)}
        value={text}
        
      />
      <div className="send">
        {/* <img src={Attach} alt="attach" /> */}
        <input
          type="file"
          style={{ display: "none" }}
          id="file"
          onChange={(e) => setImg(e.target.files[0])}
          />
        <label htmlFor="file">
          <img src={Attach} alt="img" />
        </label>
        <button onClick={handleSend}>Send</button>
    
      </div>

    </div>

how to achieve that?

a click handler on a button element should automatically be fired when the user presses Enter (or Space) when the button is focused. Do you want it to fire when the user presses enter anywhere on the page? In that case you need to add an event listener to the `document` (in a `useEffect`, and remove it in the cleanup). — Robin Zigmond, Dec 31 '22 at 12:26

score 2 · Answer 1 · answered Dec 31 '22 at 12:56

Simply you can warp the input with the form tag and you can use the onSubmit function, In that case, onClick and press enter both will work.

const handleOnSubmit = () => {
  // write your function here

}

<form onSubmit={handleOnSubmit} className="input">
  <input
    type="text"
    placeholder="Type something..."
    id="myinput"
    onChange={(e) => setText(e.target.value)}
    value={text}
  />
  <div className="send">
    {/* <img src={Attach} alt="attach" /> */}
    <input
      type="file"
      style={{ display: 'none' }}
      id="file"
      onChange={(e) => setImg(e.target.files[0])}
    />
    <label htmlFor="file">
      <img src={Attach} alt="img" />
    </label>
    <button type="submit">Send</button>
  </div>
</form>

score 0 · Answer 2 · answered Dec 31 '22 at 12:50

0

Basically, there can be many ways to do so, you can use onKeyPress attribute to check if the pressed key is "Enter" and then run the same "handleSend" function.

<button
     onClick={handleSend}
     onKeyDown={e => e.key === 'Enter' ? handleSend: 
''}>Send</button>

this query is already discussed in this thread. Here's a link!

answered Dec 31 '22 at 12:50

Rahul Kumar

9
1

as I already pointed out in a comment, this is absolutely not necessary. If this isn't working for the OP they should edit their question to give more detail. – Robin Zigmond Dec 31 '22 at 12:54
Thank you bhai but its not working will you please resend this – santu01 Dec 31 '22 at 14:10

onClick event for enter Button in react js

2 Answers2