jquery - 通过 BlueImp FileUpload jQuery 插件使用 ReactJS 上传文件

Question

这是 ReactJS 的新手。

有人可以建议使用什么或如何在 React 中上传表单(带有一些输入框和文件选择器)吗？

尝试使用 BlueImp JQuery-file-upload plugin 一直让我很紧张。 。错误消息很神秘，并且未能从 Google 获得任何有用的帮助。

我的代码如下:

<form id="myForm" enctype="multipart/form-data" onSubmit={this.handleSubmit}>
  <input type="text" name="name">
  <input type="text" name="lastName">
  <input type="file" accept="image/*" name="myPic">
</form>

// Inside handleSubmit() of my component
$('#myForm").fileupload('add', {url: "myurl"});

谢谢!

Answer 1

在 React 中使用 jQuery 插件是合理的，但由于 React 保留了自己的 DOM 虚拟表示，因此您应该避免使用 jQuery 选择器。

提交表单时，使用事件目标获取对真实 DOM 节点的引用，并将其包装在 jQuery 对象中以访问插件:

React.createClass({
  handleSubmit: function(event) {
    $(event.target).fileupload('add', {url: "myurl"});
  },
  render: function() {
    return (
      <form enctype="multipart/form-data" onSubmit={this.handleSubmit}>
        <input type="text" name="name" />
        <input type="text" name="lastName" />
        <input type="file" accept="image/*" name="myPic" />
      </form>
    );
  }
});