React中实现回车键触发发送按钮onClick事件的方法

现有一段React代码，点击页面中的Send按钮可正常执行handleSend函数，现在需要同时支持按下回车键触发相同的发送操作，原代码如下：

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

解决方案 #

方法一：给输入框绑定按键事件 #

直接在文本输入框上添加onKeyDown事件，判断按下的是否为回车键，若是则调用handleSend：

<input
  type="text"
  placeholder="Type something..."
  id="myinput"
  onChange={(e) => setText(e.target.value)}
  value={text}
  // 新增回车键触发逻辑
  onKeyDown={(e) => {
    if (e.key === 'Enter') {
      handleSend();
    }
  }}
/>

方法二：用form标签包裹输入区域（更符合语义化） #

把整个输入和发送区域用<form>包裹，给form绑定onSubmit事件，同时阻止默认的表单提交行为（避免页面刷新），并将按钮类型改为submit：

<form className="input" onSubmit={(e) => {
  e.preventDefault(); // 阻止默认表单提交，避免页面刷新
  handleSend();
}}>
  <input
    type="text"
    placeholder="Type something..."
    id="myinput"
    onChange={(e) => setText(e.target.value)}
    value={text}
  />
  <div className="send">
    <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> {/* 按钮类型改为submit */}
  </div>
</form>

这种方法更贴合HTML原生逻辑，form会自动处理回车提交，点击按钮也会触发相同的提交事件，无需额外处理点击逻辑。

内容的提问来源于stack exchange，提问作者user15998452