Javascript 如何正确地将表单中的数据发送到我的URL？

如何从该表单读取数据并将其发送到我的自定义URL

          <div className='contact-form-group'>
            <InputGroup size="small">
              <input type="text"
                     placeholder={'Enter Your Name'}/>
            </InputGroup>
          </div>
        <InputGroupAddon addonType="append">
          <div className="contact-search-icon-container">
            submit
          </div>
        </InputGroupAddon>

我认为您不需要将event.target传递给FormData

下面是一个简单的解决方案，展示了如何处理文件和文本：

从React导入React； 类上载扩展了React.Component{ 建造师{ 超级的 此.state={ 图片： }; } handleFileChange=e=>{ 这是我的国家{ [e.target.name]：e.target.files[0] }; }; handleTextChange=e=>{ 这是我的国家{ [e.target.name]：e.target.value }; }; handleSubmit=async e=>{ e、 防止违约； const formData=新的formData； 对于此.state中的let name{ formData.appendname，this.state[name]； } 等待获取/api/上传{ 方法：邮寄， 正文：formData }; 完成； }; 渲染{ 回来 ; } } 导出默认上传；

---

非常感谢。但是什么是“e.target.files[0]”？我怎样才能更改handleFileChange以只发送文本而不是文件？@AlinaHomyakova你说得对。这是文件。文件[0]表示与数组类似的第一个文件。如果您只想发送文本，请执行e.target.value。我已经更新了代码，因此您可以检查函数handleTextChange。如果解决方案正确，则可以勾选复选框将其标记为答案：

handleSubmit = (event) => {

    event.preventDefault()
    const form = event.target
    const data = new FormData(form)

    for (let name of data.keys()) {
      const input = form.elements[name]
    }
    const proxyUrl = 'https://cors-anywhere.herokuapp.com/'
    const url = 'my_url'
    fetch(proxyUrl + url, {
      method: 'POST',
      body: data,
      headers: { 'Content-Type': 'application/json' },

    }).then(function (response) {
      //handle success
      console.log(response)
    })
      .catch(() => console.log('Can’t access ' + url + ' response. Blocked by browser?'))
  }