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在点击输入时都会被触发。你需要管理它。

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

1 个答案: