Question

我有一个文件上传组件，如下所示：

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组件的materialize 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的工作知识。我现在坚持了很长一段时间。如果您觉得我的知识存在一些差距，请建议。

Answer 1

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。

React文件上传如何在上传成功或失败时显示吐司

1 个答案: