スターターキット

Question

を反応させるためにjqueryのを追加し、私はJavascriptの世界に新たなんだとシンプルを作成するために、いくつかの開始は、私がReact Starter Kitで開始し、簡単なアップロードファイルであるwhch私の最初のモジュールを追加したプロジェクト 反応します。

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) 

誰でも助けることができますか？ なぜサーバー側でクライアントサイドコードを実行したいのですか？

Answer 1

あなたのrender関数では、構文に多少の間違いがありました（特に、他のフレームワークからのものであれば、Reactの全員をキャッチしていると思います）。この行を見てください：

return <form onSubmit={this.uploadSelectedFile()}> ... </form> 

あなたの関数名の末尾に括弧を持っている - つまり、サーバーを含め、関数にrender機能を実行するたびに呼んでいます！

実証するための最良の方法では、JavaScriptが実際に実行されますどのようにJSXを翻訳することです：

return React.createElement("form", { onSubmit: this.uploadSelectedFile() }); 

あなたはthis.uploadSelectedFileの戻り値ではなく、関数自体にonSubmitプロパティを設定しています。

修正する必要があるのは、まず、前述のステートメントの最後から角括弧を削除します。 2つ目は少し明らかです - あなたは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.

うまくいけば！