Form 不进入函数内部，它一直忽略 ```onSubmit``` 上的函数，并按照 React 中的默认方式执行？

Question

我想将表单提交给 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> // the Submit button
  </div>
</form>

Answer 1

这是

j|tsx

它不是vue所以它很烦人你需要说清楚它是编译器正常工作的函数：

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

Answer 2

将 prevent default 写在表格的第一行，它应该可以工作

<form method="POST" onSubmit={(e) => {
      e.preventDefault();
      if (props.addOrEdit === "ADD") {
         AddProducts();
      } else {
         editTheProduct();
      }
 }}
 className="AdminProductEdit">

另一件事是确保没有其他按钮的类型为提交或根本没有类型的按钮。确保为表单中的普通按钮明确提供

type=button

Answer 3

就像我单独将 eventListner 添加到这样的表单时一样工作

  useEffect(() => {
    const AdminProductEdit = document.querySelector('.AdminProductEdit');
    AdminProductEdit.addEventListener('submit', (e) => {
      props.addOrEdit === 'ADD' ? AddProducts(e) : editTheProduct(e)
    })
  }, [])

并像这样从表单中删除 `onSubmit``` 监听器

 <form method='POST' className='AdminProductEdit'>

Answer 4

首先检查

props

是否有有效数据，

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