陣營文件上傳如何顯示上載成功或失敗

我有一個文件上傳組件敬酒如下：陣營文件上傳如何顯示上載成功或失敗

import React from 'react'; 
import ReactDOM from 'react-dom'; 

export default class FileUploadForm extends React.Component{ 
    render(){ 
    return (
     <div class="row"> 

       <div class="file-field input-field"> 
        <div class="btn"> 
        <span>Browse</span> 
        <input type="file" multiple onChange={this.onChange.bind(this)} ref = "file"/> 
        </div> 
        <div class="file-path-wrapper"> 
        <input class="file-path validate" type="text" placeholder="Upload multiple files" /> 
        </div> 
       </div> 
     </div> 
    ); 
    } 

    onChange(e){ 
    console.log("FileUploadForm: upload files selected") 
    let files = e.target.files; 
    if(files.length == 0){ 
     return 
    } 
    console.log(files[0]); 
    this.props.onFileUploadRequested(files); 
    } 
}

，這裏是將它連接到Redux的容器：

import { connect } from 'react-redux'; 
import { uploadFiles } from '../actions.js'; 
import FileUploadForm from '../components/FileUploadForm'; 

const mapStateToProps = (state, ownProps) => { 
    return { 
    } 
} 

const mapDispatchToProps = (dispatch, ownProps) => { 
    return { 
    onFileUploadRequested: (files) => { 
     dispatch(uploadFiles(files)); 
    } 
    } 
} 

const FileUploadContainer = connect(
    mapStateToProps, 
    mapDispatchToProps 
)(FileUploadForm); 

export default FileUploadContainer;

我我正在使用物化具有Toast組件的CSS。

// Materialize.toast(message, displayLength, className, completeCallback); 
    Materialize.toast('I am a toast!', 4000) // 4000 is the duration of the toast

我點擊了一個API來上傳圖片，告訴你的調用是失敗還是成功。然後我派遣其改變狀態字段（fileUploadStatus）作爲操作：

FILE_UPLOAD_SUCCEEDED：fileUploadStatus = SUCCESS
FILE_UPLOAD_FAILED：fileUploadStatus = FAILURE

該字段的初值爲READY。

我不知道如何顯示上載成功或失敗敬酒。

以下是我的疑問：

是不是最好使用一個全球性的消息組件並顯示，只有文件上傳組件內部API調用的成功或失敗的所有這樣的消息還是什麼？
考慮採用現場「uploadStatus」中的上述，如何將其恢復到READY狀態，這樣就進一步使不顯示的消息？

我是一個完整的初學者開發單頁面應用程序，只有JavaScript的工作知識。我現在已經停留了很長一段時間了。如果您覺得我的知識存在一些差距，請提出建議。

來源

2017-04-11 Ishan

1）有許多方法來解決這個問題。有什麼工作對我來說是揭露通過context一個toast功能，即住在最頂層的組件。在React中，應該謹慎使用context，但這種情況是可以接受的IMO。例如：

class App extends Component { 
    toast() { 
    ... 
    } 
    getChildContext() { 
    return { 
     toast: this.toast 
    }; 
    } 
    render() { 
    return (
     <Child /> 
    ); 
    } 
} 

App.childContextTypes = { 
    toast: PropTypes.func 
}; 

class Child extends Component { 
    ... 
    onSomeEvent() { 
    this.context.toast('Something happened.'); 
    } 
} 

Child.contextTypes = { 
    toast: PropTypes.func 
};

2）Materialize.toast()有一個可選的回調函數作爲你可以，但是你想用一個第四個參數。在這種情況下，它可以用於恢復您的fileUploadStatus。

來源

2017-04-11 15:31:02 mulleady1

陣營文件上傳如何顯示上載成功或失敗

回答

相關問題