javascript - 如何使用 React 和 Express 以类似 Ajax 的方式提交表单？

Question

我有一个我想提交的表格。但是，不是在提交后重新加载页面，我只是希望以类似 Ajax 的方式提交表单。

也就是说，我要发送数据并让服务器响应，但页面要留在浏览器中。

相关的前端 React 代码如下所示：

  handleSubmission = (event) => {
    // event.preventDefault();
    console.log('form submitted');
  }


  render () {
    return (
          // ... snip      
          <form onChange = {this.handleChange} onSubmit = {this.handleSubmission} action = "/articles/add" method="POST">

更新：

我在这里找到了这个教程，它使用了一些叫做 FormData 的东西：

handleSubmit(event) {
    event.preventDefault();
    const data = new FormData(event.target);
    // NOTE: you access FormData fields with `data.get(fieldName)`    
    const [month, day, year] = data.get('birthdate').split('/');
    const serverDate = `${year}-${month}-${day}`;
    data.set('birthdate', serverDate);
    data.set('username', data.get('username').toUpperCase());
    fetch('/api/form-submit-url', {
      method: 'POST',
      body: data,
    });
}

更新：

表单上的 React 文档显示了 preventDefault 的使用，但没有显示实际提交是如何完成的。

更新

MDN 涵盖表单提交，但不涵盖 preventDefault 方法。见这里。

标签： javascriptreactjsexpressroutes

Answer 1

有几种方法可以做到这一点。react 文档没有解释如何执行此操作，因为它不是 reacts'responsibility 这样做。您可以使用上面示例中所写的 fetch API，也可以使用 Axios 等其他库。您应该如何格式化要发送到服务器的数据（具体路由如何期望数据被格式化）。

基本上，在提交句柄方法中，您应该首先使用 event.preventDefault() 防止默认行为。然后您应该正确格式化您的数据以发送到服务器。在 React 中，大多数表单对每个输入都有一个 onChange 方法，该方法不断更新组件的状态以匹配每个输入中的值，因此在您提交表单时，您的数据已经存储在组件的状态中。最后，您应该将请求作为发布请求发送到正确的 URL，并在服务器响应时创建回调函数。您可以使用 async/await 或使用 promise 中使用的函数 then() 来执行此操作。为简单起见，我们将使用 then()。

例子

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

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

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

  handleSubmit(event) {
    event.preventDefault();
    const data = this.state;
    fetch(YOUR_URL, { method: 'POST', body: data })
      .then(response => response.json())
      .then(data => console.log(data));
  }

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