Question

我是新手做出反应我已经将这个反应组件从我在网上发现的不同部分拼凑而成。它应该在提交时通过ajax上传文件。由于某种原因，它是双重射击。因此，当我点击提交时，我的服务器收到两个请求而不是一个。

有什么突出的反应初学者可能会错过吗？

/** @jsx React.DOM */
var $ = require("jquery")
var React = require('react');

var FileForm = React.createClass({
  getInitialState: function() {
    return {
      myFileName: "",
      myFileHandle: {}
    };
  },
  handleChange: function(event) {
    this.setState({
      files: [event.target.files[0]] // limit to one file
    });
  },
  handleSubmit: function(e) {
    e.preventDefault();

    var data = new FormData();
    $.each(this.state.files, function(i, file) {
      data.append('file-'+i, file)
    })

    $.ajax({
      url: "/api/content/csv/upload.json",
      data: data,
      cache: false,
      contentType: false,
      processData: false,
      type: 'POST',
      success: function(data) {
        this.refs.fileInput.value = null
        console.log(this.refs.fileInput)
        console.log(data)
      }.bind(this),
      error: function(xhr, status, err) {
        console.log(xhr)
        console.log(status)
        console.log(err)
      }.bind(this)
    })

  },
  render: function() {
    return (
      <form onSubmit={this.handleSubmit} method="POST" encType="multipart/form-data">
        <input ref="fileInput" type="file" onChange={this.handleChange}/>
        <input type="submit" value="Submit"/>
      </form>
    )
  }
})

module.exports = FileForm

文件上传组件发送两个ajax请求

0 个答案: