reactjs 表单没有进入函数内部，它一直忽略onSubmit上的函数，并像React中默认的那样做？

zbdgwd5y 于 2023-05-06 发布在 React

关注(0)|答案(4)|浏览(182)

我想提交表单到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>

reactjs

来源：https://stackoverflow.com/questions/76178891/form-not-going-inside-function-it-keeps-ignoring-the-function-on-onsubmit

4条答案

按热度按时间

tv6aics11#

这是j|tsx，它不是vue，所以这很烦人，你需要弄清楚这是一个编译器正常工作的函数：

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

赞(0）回复(0）举报 2023-05-06

fd3cxomn2#

将prevent默认值写在表单的第一行，它应该可以工作

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

另一件事是确保没有其他按钮的类型为提交或按钮没有任何类型。确保为表单中的普通按钮明确给予type=button

赞(0）回复(0）举报 2023-05-06

pkln4tw63#

首先检查props是否有有效数据，

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

赞(0）回复(0）举报 2023-05-06

stszievb4#

它的工作原理与我将eventListner单独添加到表单时相同，如下所示

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

并从表单中删除`onSubmit```监听器，如下所示

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

赞(0）回复(0）举报 2023-05-06

我来回答

reactjs 表单没有进入函数内部，它一直忽略onSubmit上的函数，并像React中默认的那样做？

4条答案

相关问题

热门标签

最新问答