gpt4 book ai didi

javascript - 将 jquery 添加到 React 入门工具包

转载 作者:行者123 更新时间:2023-11-30 16:04:03 25 4
gpt4 key购买 nike

我是 Javascript 世界的新手,正在开始创建一个简单的 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 类时,you need to be explicit about binding your functions to the correct this value :

class UploadPanel extends Component {
...
constructor() {
super();
this.uploadSelectedFile = this.uploadSelectedFile.bind(this);
this.handleFileChange = this.handleFileChange.bind(this);
}
...
}

There's also more elegant ways of doing this with arrow functions if you're using the stage-0 Babel preset.

希望这能为您解决一些问题!

关于javascript - 将 jquery 添加到 React 入门工具包,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/37294627/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com