如何通过文本框按键触发表单提交函数？回车触发失效排查

首先看按钮的写法：

<button id="formBtn" onClick={submitForm(onFormSubmit)} >

这里的submitForm(onFormSubmit)会在组件渲染阶段就直接执行，而非点击按钮时触发。正确写法是把它包裹成箭头函数，让点击动作触发时才执行：

<button id="formBtn" onClick={() => submitForm(onFormSubmit)} >

再看输入框的代码：

<input onInput={handleInput} onkeypress={(e)=>{ if(e.key === "Enter" && !e.shiftKey) { console.log("log1:Enter detected") submitForm(onFormSubmit) } }} />

你遇到的问题和按钮的问题本质一致：submitForm(onFormSubmit)是直接执行函数，但如果submitForm是一个返回函数的高阶函数（比如用来包装提交回调的逻辑），直接调用它只会返回一个函数，不会触发实际的提交逻辑。你需要改成以下两种方式之一：

• 方案一：如果submitForm返回可执行函数，直接调用返回值

submitForm(onFormSubmit)()

• 方案二：用箭头函数包裹，和按钮的正确写法保持一致

() => submitForm(onFormSubmit)

另外注意，React中事件名采用驼峰命名，onkeypress建议改为onKeyDown，避免兼容性问题。修改后的输入框代码示例：

<input 
  onInput={handleInput} 
  onKeyDown={(e) => { 
    if(e.key === "Enter" && !e.shiftKey) { 
      console.log("log1:Enter detected")
      submitForm(onFormSubmit)()
    } 
  }} 
/>

总结来说，核心问题是你直接在事件回调里执行了submitForm(onFormSubmit)，而非将其作为点击/按键触发时才执行的函数。如果submitForm是用来生成提交回调的函数，必须确保实际执行的是它返回的函数，或者用箭头函数包裹延迟执行。

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