React中按Enter提交textarea遇报错：myFormRef.submit不是函数

报错原因 #

你使用的<Form>是UI组件库（比如Ant Design）的封装组件，并非原生HTML的<form>标签。useRef获取到的是该组件的实例对象，而非原生DOM元素，所以不存在原生form的submit方法，调用时就会抛出类型错误。

解决方案 #

方案1：使用组件库提供的Form实例提交（推荐）

大部分UI组件库的Form组件都提供了专门的实例方法来处理提交，以Ant Design为例：

import { Form, TextareaAutosize, useForm } from 'antd';

// 通过useForm获取组件库的Form实例
const [form] = useForm();

const onEnterPress = (e) => {
  // 用e.key替代已废弃的keyCode，兼容性更好
  if (e.key === 'Enter' && !e.shiftKey) {
    e.preventDefault();
    form.submit(); // 调用组件库Form实例的submit方法
  }
};

// 表单部分：将form实例传入Form组件
<Form form={form} onSubmit={sendMessege}>
  <TextareaAutosize
    className='text_input'
    placeholder='Digite algo aqui'
    value={formValue}
    onChange={(e) => setFormValue(e.target.value)}
    disabled={!user}
    minRows={3}
    maxRows={6}
    onKeyDown={onEnterPress}
  />
</Form>

方案2：直接调用提交函数

既然Form的onSubmit已经绑定了sendMessege，可以跳过form的submit方法，直接在按键事件里调用该函数：

const onEnterPress = (e) => {
  if (e.key === 'Enter' && !e.shiftKey) {
    e.preventDefault();
    sendMessege(); // 直接触发提交逻辑
  }
};

注意：如果你的提交逻辑依赖组件库的表单校验，这种方式需要确保sendMessege内部已经处理了校验逻辑。

方案3：获取原生form DOM元素（不推荐）

如果必须使用原生form的submit方法，可以通过组件实例获取内部的原生DOM元素（不同组件库的获取方式可能不同）：

import ReactDOM from 'react-dom';

const myFormRef = useRef();

const onEnterPress = (e) => {
  if (e.key === 'Enter' && !e.shiftKey) {
    e.preventDefault();
    // 获取原生form DOM（以Ant Design为例，可用getFormElement方法）
    const nativeForm = myFormRef.current.getFormElement();
    // 或者用ReactDOM.findDOMNode（已标记为过时，仅作兼容参考）
    // const nativeForm = ReactDOM.findDOMNode(myFormRef.current);
    nativeForm.submit();
  }
};

额外优化点 #

• 替换keyCode为e.key === 'Enter'：keyCode已被浏览器标准废弃，e.key的兼容性和可读性更好。

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