JavaScript-发送表单数据

我正在尝试收集表单数据，并在我的ReactJS组件中的POST请求中将其作为有效负载发送，如下所示：

handleSubmit = (event) => {
    const data = new FormData(event.target);
    event.preventDefault();
    // There is a promise with XMLHttpRequest
}

    return(
        <div>
            <div className="registration-block">
                <form onSubmit={this.handleSubmit}>
                // There are some inputs and submit button
                </form>
            </div>
            {popup}
        </div>
    );

handleSubmit=（事件）=>{
const data=新表单数据（event.target）；
event.preventDefault（）；
//XMLHttpRequest有一个承诺
}
返回(
//有一些输入和提交按钮
{popup}
);

正如您所见，我创建了一个handleSubmit函数，在onSubmit事件中调用它

在这个函数中，构造

newformdata（event.target）返回空表单

从我的表单中收集数据并将其作为有效负载发送到POST请求的正确方法是什么？
尝试这样更改代码

<form onSubmit={e => this.handleSubmit(e)}>
  // There are some inputs and submit button
</form>

this.handleSubmit（e）}>
//有一些输入和提交按钮
通常，您希望在React中而不是表单本身中维护表单状态

见以下文件：


工作示例如下所示：

class NameForm extends React.Component {
  constructor(props) {
    super(props);
    this.state = {value: ''};

    this.handleChange = this.handleChange.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this);
  }

  handleChange(event) {
    this.setState({value: event.target.value});
  }

  handleSubmit(event) {
    alert('A name was submitted: ' + this.state.value);
    event.preventDefault();
  }

  render() {
    return (
      <form onSubmit={this.handleSubmit}>
        <label>
          Name:
          <input type="text" value={this.state.value} onChange={this.handleChange} />
        </label>
        <input type="submit" value="Submit" />
      </form>
    );
  }
}

类名称表单扩展了React.Component{
建造师（道具）{
超级（道具）；
this.state={value:''}；
this.handleChange=this.handleChange.bind（this）；
this.handleSubmit=this.handleSubmit.bind（this）；
}
手变（活动）{
this.setState（{value:event.target.value}）；
}
handleSubmit（事件）{
警报（“已提交名称：”+this.state.value）；
event.preventDefault（）；
}
render（）{
返回(
姓名：
);
}
}
根据reactjs的文档

类应用程序扩展了React.Component{
状态={fname:''，lname:''}；
handleSubmit=事件=>{
event.preventDefault（）；
console.log（this.state）；
};
handleChange=e=>{
设val=e.target.value；
this.setState（{[e.target.name]：val}）；
};
render（）{
返回(
);
}
}
尝试以下操作：

handleSubmit(event) {
        event.preventDefault();
        const data = new FormData(event.target);

        fetch('/api/form-submit-url', {
          method: 'POST',
          body: data,
        });
      }

你能多解释一点或者发布更多的代码吗？为什么你要发送formData而不是在State中设置谢谢，非常有用的信息。这对我帮助很大
handleSubmit(event) {
        event.preventDefault();
        const data = new FormData(event.target);

        fetch('/api/form-submit-url', {
          method: 'POST',
          body: data,
        });
      }