Javascript 未调用Submit函数的React表单

我的页面上有一个表单，其中有一个onSubmit函数，我想调用它，但它似乎没有被触发，因为console.log从未出现过

import React, { Component } from 'react'

class EmailSignUp extends Component {
  constructor(props) {
    super(props)
      this.state = {
        email: '',
        lastName: '',
        error: false
      }

      this.handleChange = this.handleChange.bind(this)
      this.onSubmitForm = this.onSubmitForm.bind(this)
   }

  onSubmitForm (e) {
    console.log('function has run');
    e.preventDefault()
    let formData = new FormData(e)
    const { formAction } = this.props

    const requestOptions = {
      method: 'POST',
      body: formData
    }

    fetch(formAction, requestOptions)
      .then(response => response.text())
      .then(result => console.log(result))
      .catch(error => console.log('error', error))
  }

  handleChange (e) {
    const value = e.target.value
    const inputId = e.target.id
    this.setState(() => ({
      [inputId]: value
    }))
  }

  render () {
    const { error } = this.state

    return (
      <div id='email-form' className='container'>
          <form
            name='form'
            id='form'
            onSubmit={this.onSubmitForm}
            method='post'
          >
            <div className='form-group'>
              <label htmlFor='email'>Email</label>
              <input
                type='email'
                name='Email'
                className='form-control'
                id='email'
                placeholder='youremail@email.com'
                onChange={this.handleChange}
                value={this.state.email}
                required
              />
            </div>
            <div className='form-group'>
              <label htmlFor='lastName'>Last name</label>
              <input
                type='text'
                name='lastName'
                className='text form-control'
                id='lastName'
                placeholder='Last Name'
                onChange={this.handleChange}
                value={this.state.lastName}
                required
              />
            </div>
            <button
              type='submit'
              name='Submit'
              value='Subscribe'
              className='btn btn-primary item_cta'
              readOnly
            />
          </form>
          {error && <p>{error}</p>}
        </div>
    )
  }
}

export default EmailSignUp

import React，{Component}来自“React”
类EmailSignUp扩展组件{
建造师（道具）{
超级（道具）
此.state={
电子邮件：“”，
姓氏：“”，
错误：false
}
this.handleChange=this.handleChange.bind（this）
this.onSubmitForm=this.onSubmitForm.bind（this）
}
电子表格（e）{
log（'函数已运行'）；
e、 预防默认值（）
设formData=新formData（e）
const{formAction}=this.props
常量请求选项={
方法：“POST”，
正文：formData
}
获取（formAction、requestOptions）
.then（response=>response.text（））
.then（result=>console.log（result））
.catch（错误=>console.log（'error'，error））
}
手变（e）{
常量值=e.target.value
const inputId=e.target.id
此.setState（（）=>({
[inputId]：值
}))
}
渲染（）{
const{error}=this.state
返回(
电子邮件
姓
{error&{error}
}
)
}
}
导出默认电子邮件注册

运行代码会导致错误

无法构造“FormData”：参数1的类型不是“HTMLFormElement”

。实际表单元素将位于submit事件的

target

上。通过将

e

更新为

e.target

，尝试以下操作：

let formData = new FormData(e.target);
const { formAction } = this.props;

---

同时从

表单

元素中删除

方法

。此外，从

按钮

中删除

只读

。它不是像

br

那样的自动关闭元件：

<button
  type="submit"
  name="Submit"
  value="Subscribe"
  className="btn btn-primary item_cta"
 >submit</button>

提交

---

希望这有帮助

从表单中删除

method

，还有为什么按钮上有

readOnly

？如果我删除了该方法，那么它仍然不会运行，并将所有表单数据作为查询转到URL？比如www.test.com？email=&lastname=您是否查看了控制台中的错误？很明显，它们与您如何使用FormData有关。

构造“FormData”失败：参数1不是“HTMLFormElement”类型。

：