[英]adding jquery to react starter kit
我是Java語言世界的新手,並開始創建一個簡單的React項目,該項目是使用React Starter Kit啟動的,並添加了我的第一個模塊,其中一個簡單的上傳文件是:
上傳文件。
import React, { Component, PropTypes } from 'react';
import FormData from 'form-data';
import $ from 'jquery';
class UploadPanel extends Component {
state = {
file:'',
};
uploadSelectedFile() {
// Add the uploaded image content to the form data collection
var data = new FormData();
data.append("image", this.state.file);
data.append("temp", 'temp');
$.ajax({
method: "POST",
url: "rest/dicom/upload",
xhr: function () { // Custom XMLHttpRequest
var myXhr = $.ajaxSettings.xhr();
return myXhr;
},
cache: false,
data: data,
contentType: false,
processData: false,
success: function (data) {
alert('file sent');
console.log(data);
},
error: function (data) {
alert('error');
console.log(data);
}
});
}
handleFileChange(e){
let file = e.target.files;
if(file.length>0)
this.setState({file: file});
else
this.setState({file: ''});
}
render() {
//return <p> hi this is a test </p>
//var createItem = function (item) {
// return <li key={item.id}>{item.text}</li>;
//};
return <form onSubmit={this.uploadSelectedFile()}>
<input type="file" name="image" id="image" value={this.state.file} onChange={this.handleFileChange}/>
<input type="submit" value="ارسال" disabled={this.state.file!=''}/>
</form>;
}
}
export default UploadPanel;
但是當我打開頁面時,(在服務器中)編譯出現以下錯誤:
TypeError: _jquery2.default.ajax is not a function
at UploadPanel.uploadSelectedFile (D:\Projects\Behyaar\BOIS\ReactDashboardClient\build\webpack:\src\components\bois\UploadDicom\UploadPanel.js:24:7)
at UploadPanel.render (D:\Projects\Behyaar\BOIS\ReactDashboardClient\build\webpack:\src\components\bois\UploadDicom\UploadPanel.js:59:33)
at ReactCompositeComponentMixin._renderValidatedComponentWithoutOwnerOrContext (D:\Projects\Behyaar\BOIS\ReactDashboardClient\node_modules\react\lib\ReactCompositeComponent.js:587:34)
at ReactCompositeComponentMixin._renderValidatedComponent (D:\Projects\Behyaar\BOIS\ReactDashboardClient\node_modules\react\lib\ReactCompositeComponent.js:607:32)
at wrapper [as _renderValidatedComponent] (D:\Projects\Behyaar\BOIS\ReactDashboardClient\node_modules\react\lib\ReactPerf.js:66:21)
at ReactCompositeComponentMixin.mountComponent (D:\Projects\Behyaar\BOIS\ReactDashboardClient\node_modules\react\lib\ReactCompositeComponent.js:220:30)
at wrapper [as mountComponent] (D:\Projects\Behyaar\BOIS\ReactDashboardClient\node_modules\react\lib\ReactPerf.js:66:21)
at Object.ReactReconciler.mountComponent (D:\Projects\Behyaar\BOIS\ReactDashboardClient\node_modules\react\lib\ReactReconciler.js:37:35)
at ReactDOMComponent.ReactMultiChild.Mixin.mountChildren (D:\Projects\Behyaar\BOIS\ReactDashboardClient\node_modules\react\lib\ReactMultiChild.js:241:44)
at ReactDOMComponent.Mixin._createContentMarkup (D:\Projects\Behyaar\BOIS\ReactDashboardClient\node_modules\react\lib\ReactDOMComponent.js:591:32)
at ReactDOMComponent.Mixin.mountComponent (D:\Projects\Behyaar\BOIS\ReactDashboardClient\node_modules\react\lib\ReactDOMComponent.js:479:29)
at Object.ReactReconciler.mountComponent (D:\Projects\Behyaar\BOIS\ReactDashboardClient\node_modules\react\lib\ReactReconciler.js:37:35)
at ReactCompositeComponentMixin.mountComponent (D:\Projects\Behyaar\BOIS\ReactDashboardClient\node_modules\react\lib\ReactCompositeComponent.js:225:34)
at wrapper [as mountComponent] (D:\Projects\Behyaar\BOIS\ReactDashboardClient\node_modules\react\lib\ReactPerf.js:66:21)
at Object.ReactReconciler.mountComponent (D:\Projects\Behyaar\BOIS\ReactDashboardClient\node_modules\react\lib\ReactReconciler.js:37:35)
at ReactDOMComponent.ReactMultiChild.Mixin.mountChildren (D:\Projects\Behyaar\BOIS\ReactDashboardClient\node_modules\react\lib\ReactMultiChild.js:241:44)
有人可以幫忙嗎? 為什么要在服務器中運行客戶端代碼?
在您的render
函數中,您在語法上犯了一個小錯誤(我認為這是在React中吸引所有人的地方,尤其是當它們來自其他框架時)。 看這行:
return <form onSubmit={this.uploadSelectedFile()}> ... </form>
函數名稱末尾帶有方括號-換句話說,每次render
函數運行時,包括在服務器上,您都在調用該函數!
演示的最佳方法是將JSX轉換為將實際運行的JavaScript:
return React.createElement("form", { onSubmit: this.uploadSelectedFile() });
您正在將onSubmit
屬性設置為this.uploadSelectedFile
的返回值 ,而不是函數本身。
您需要修復兩件事-首先,從前面提到的語句的末尾刪除括號。 第二件事不太明顯-在使用ES6類時, 需要明確地將函數綁定到正確的this
值 :
class UploadPanel extends Component {
...
constructor() {
super();
this.uploadSelectedFile = this.uploadSelectedFile.bind(this);
this.handleFileChange = this.handleFileChange.bind(this);
}
...
}
如果您使用的是stage-0
Babel預設,還可以通過箭頭功能使用更優雅的方式進行此操作。
希望這可以為您清除一切!
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.