如何使用 React 创建表单帖子？

Question

用户在输入字段中输入他的电子邮件，我想收到

FormData { "email": "test@gmail.com" }

在服务器上。您可以使用任何服务器。 UPD：我试过这样做

class MyForm extends React.Component {
  constructor() {
    super();
    this.handleSubmit = this.handleSubmit.bind(this);
  }

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

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

  render() {
    return (
      <form onSubmit={this.handleSubmit}>
        <label htmlFor="username">Enter username</label>
        <input id="username" name="username" type="text" />

        <label htmlFor="email">Enter your email</label>
        <input id="email" name="email" type="email" />

        <label htmlFor="birthdate">Enter your birth date</label>
        <input id="birthdate" name="birthdate" type="text" />

        <button>Send data!</button>
      </form>
    );
  }
}

这不是我的代码，我是 react.js 的新手。问题是：我在哪里可以看到这种格式的数据？

Answer 1

您可以使用axios 以您想要的格式将此数据发布到服务器，

var bodyFormData = new FormData();
bodyFormData.set('userName', 'test@gmail.com');
axios({
    method: 'post',
    url: 'myurl',
    data: bodyFormData,
    headers: {'Content-Type': 'multipart/form-data' }
    })
    .then(function (response) {
        //handle success
        console.log(response);
    })
    .catch(function (response) {
        //handle error
        console.log(response);
    });

我建议为此使用 axios，但您也可以使用 fetch 来完成，看看 this 答案，它解释得很清楚。