如何在React.js中不使用表单，按回车键提交输入内容？

云上老周

2026-8-25

不借助表单组件，React中通过回车键提交输入内容的实现方法

完全可以实现，核心是给输入框绑定键盘按下事件，监听回车键触发提交逻辑，不需要依赖表单组件。

实现步骤与示例

给input元素添加onKeyDown事件监听
在事件处理函数中判断是否按下回车键（推荐用e.key === 'Enter'判断，比keyCode兼容性更好）
触发自定义的提交逻辑，比如发送请求、处理输入内容等

以下是函数组件的实现示例：

import { useState } from 'react';

function EnterSubmitInput() {
  const [inputVal, setInputVal] = useState('');

  const handleKeyPress = (e) => {
    if (e.key === 'Enter') {
      // 这里写你的提交逻辑
      console.log('提交的内容：', inputVal);
      // 提交后清空输入框（可选）
      setInputVal('');
    }
  };

  return (
    <input
      type="text"
      value={inputVal}
      onChange={(e) => setInputVal(e.target.value)}
      onKeyDown={handleKeyPress}
      placeholder="输入后按回车提交"
    />
  );
}

export default EnterSubmitInput;

如果是类组件，写法类似：

import React, { Component } from 'react';

class EnterSubmitInput extends Component {
  state = { inputVal: '' };

  handleKeyPress = (e) => {
    if (e.key === 'Enter') {
      console.log('提交的内容：', this.state.inputVal);
      this.setState({ inputVal: '' });
    }
  };

  render() {
    return (
      <input
        type="text"
        value={this.state.inputVal}
        onChange={(e) => this.setState({ inputVal: e.target.value })}
        onKeyDown={this.handleKeyPress}
        placeholder="输入后按回车提交"
      />
    );
  }
}

export default EnterSubmitInput;