按下Enter键提交表单时页面刷新，使用preventDefault()仍无效求解决

问题出在你绑定表单onSubmit事件的方式上：你用了箭头函数() => handleSubmit()，但没有把表单提交的事件对象e传递给handleSubmit函数，导致函数里的e是undefined，自然无法调用e.preventDefault()阻止页面刷新。

修复方案 #

方案1：直接绑定handleSubmit函数 #

把表单的onSubmit改为直接引用函数，React会自动把事件对象传递过去：

<form onSubmit={handleSubmit}>
  <label for="text">Enter Task</label>
  <input type="text" id="name" value={input} onInput={(e) => setInput(e.target.value)}></input>
  <button type="submit">Add</button>
</form>

方案2：在箭头函数中传递事件对象 #

如果必须用箭头函数（比如需要额外传参），记得把e传递给handleSubmit：

<form onSubmit={(e) => handleSubmit(e)}>
  <label for="text">Enter Task</label>
  <input type="text" id="name" value={input} onInput={(e) => setInput(e.target.value)}></input>
  <button type="submit">Add</button>
</form>

另外检查你的handleSubmit函数是否完整，确保没有语法错误（比如缺少闭合的}），语法错误也会导致函数无法正常执行，进而无法阻止默认行为。

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