React表单onSubmit未触发指定函数，点击提交页面自动刷新

我想把表单提交到Node.js后端，但点击提交按钮时页面会自动刷新。我尝试用console.log和alert验证onSubmit绑定的函数是否执行，发现均无反应，且已确认onSubmit监听的函数名称正确。

核心代码如下：

提交函数 #

const AddProducts = async (e) => {
    alert('asdf');
    e.preventDefault();
}

const editTheProduct = async (e) => {
    e.preventDefault();
}

表单代码 #

<form method='POST' onSubmit={props.addOrEdit === 'ADD' ? AddProducts : editTheProduct} className='AdminProductEdit'>

  <div className='LoginInputs'>
     <input type='text' name='name' required value={props.addOrEdit === 'ADD' ? newProduct.name : ''} onChange={handleInput} />
     <span className="LoginInputSpan">Product Name</span>
  </div>

  <div className='LoginInputs'>
      <input type='text' name='price' required value={props.addOrEdit === 'ADD' ? newProduct.price : ''} onChange={handleInput} />
      <span className="LoginInputSpan">Price</span>
  </div>

  <div className='LoginInputs' style={{ padding: '0', border: 'none', height: 'auto' }}>
    <textarea placeholder='Description' />
  </div>

  <div className="LoginBtn">
      <button type="submit" style={{ width: '200px' }}>SAVE CHANGES</button>
  </div>
</form>

1. 移除表单的method='POST'属性 #

原生HTML表单的method='POST'会触发浏览器默认的表单提交行为，直接发送请求并刷新页面，可能导致React的onSubmit回调还没执行就触发了页面刷新。React中处理表单提交完全通过JS逻辑实现，不需要依赖原生method属性。

修改后的表单标签：

<form onSubmit={props.addOrEdit === 'ADD' ? AddProducts : editTheProduct} className='AdminProductEdit'>

2. 验证props.addOrEdit的取值是否符合预期 #

如果props.addOrEdit的值既不是'ADD'也不是预期的编辑状态值，条件判断会返回undefined，导致onSubmit没有绑定任何函数，自然不会执行回调。

可以临时添加调试代码确认取值：

<form 
  onSubmit={(e) => {
    console.log('当前addOrEdit值:', props.addOrEdit);
    props.addOrEdit === 'ADD' ? AddProducts(e) : editTheProduct(e);
  }} 
  className='AdminProductEdit'
>

打开浏览器控制台查看输出，确认props.addOrEdit的实际值是否符合预期。

3. 确保函数在组件作用域内可用 #

确认AddProducts和editTheProduct是当前组件内部定义的函数，或者已通过props正确传入。如果是外部导入的函数，检查导入路径和名称是否正确。

4. 检查表单验证是否影响提交 #

表单中的required属性会触发浏览器原生验证，若有必填项未填写，浏览器会阻止提交并弹出提示。可以临时移除required属性测试，看函数是否能正常执行。

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