onClick 在反應 js 中輸入按鈕的事件

Question

下面的代碼與在此代碼中創建的按鈕一起工作正常。但我也想使用回車按鈕來完成同樣的工作。

<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> 

如何做到這一點？

Answer 1

簡單地說，你可以用form標簽扭曲輸入，你可以使用onSubmit function，在這種情況下， onClick和press enter都可以。

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>

Answer 2

基本上，有很多方法可以做到這一點，您可以使用 onKeyPress 屬性檢查按下的鍵是否為“Enter”，然后運行相同的“handleSend”function。

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

此查詢已在此線程中討論過。 這是一個鏈接！