使用 jquery blueimp 文件上传插件反应文件上传组件

Question

我是新手，正在尝试使用 React 创建文件上传组件。但是找不到原生的 React 插件。所以我尝试从 React 组件调用 JQuery 插件（Blue-imp 文件上传），我的问题是文件上传只能工作一次。 Blue-imp插件配置为自动上传文件，文件上传控件隐藏并触发点击。以下是我的代码：

var FileUpload = React.createClass({

  triggerUpload:function(){
    this.myFileInput.trigger('click');  
  },    
  componentDidMount: function() {
    this.myFileInput = $(ReactDOM.findDOMNode(this.refs.mu));
    this.myFileUpload = this.myFileInput.fileupload({
                            dataType: this.props.dataType,
                            url: this.props.uploadURL,
                      });
  },
  render: function() {
    return (
        <div className="myFP" onClick={this.triggerUpload}>
            <input type="file" ref="mu" name="files[]" multiple=""  className="hidden"/>
        </div>
    );
  }
});

ReactDOM.render(<FileUpload dataType="json" uploadURL="/upload-file" />,$('#fpDiv').get(0));

谁能告诉我通过 React 调用 jquery 插件的正确方法是什么。任何帮助将不胜感激。

Answer 1

<div className="myFP" onClick={this.triggerUpload.bind(this)}>
            <input type="file" ref="mu" name="files[]" multiple="" onClick={this.testFnc.bind(this)} className="hidden"/>
        </div>

我想知道为什么你有两个具有相同范围的方法。方法 triggerUpload 和 testFnc 在点击输入时都会被触发。你需要管理它。