在reactjs中显示文件上传消息成功或失败

Question

我正在使用 Ajax 调用在服务器中上传文件。所以我想根据文件上传显示成功和失败消息

  $.ajax({
  url: "https:my_url",
  data: {my data: my_data},
  method : "POST",
  success: function(result) {
    alert(result);
  },
  error: function(error){
    alert("Error in File Upload");
   }
  });

并在反应组件中使用它

<input id="file-input" type="file" className="fileInput" onChange=
{this.myfile} multiple />

所以请帮我打印消息作为引导程序或任何好方法，即
需要如下

<div class="alert alert-success">
<strong>Success!</strong> You should <a href="#" class="alert-
link">File uploaded </a>.
</div>

Answer 1

有一个 CSS 类 invisible 像这样

.invisible{
display:none;
}

然后有一个状态变量uploaded，其初始值为uploading

this.state = {uploaded:'uploading'}

然后创建两条警报消息

<div className=`alert alert-success ${this.state.uploading === 'success'?'':'invisible'}`>
<strong>Success!</strong> You should <a href="#" class="alert-
link">File uploaded </a>.

<div className=`alert alert-danger ${this.state.uploading === 'failure'?'':'invisible'}`>
<strong>Failure!</strong> Failed <a href="#" class="alert-
link">File uploaded </a>.
</div>

这里发生的情况是，只有当this.state.uploading 等于“成功”时才会显示成功消息，而当等于“失败”时才会显示失败消息。

然后在ajax 通话中

 $.ajax({
  url: "https:my_url",
  data: {my data: my_data},
  method : "POST",
  success: (result) => {
     this.setState({uploading:'success'})
  },
  error: (error) => {
     this.setState({uploading:'failure'})
   }
  });

ajax 调用根据ajax 调用的结果将this.state.uploading 设置为成功或失败，并显示相应的消息。

对于 ES5 风格

 var _this = this
 $.ajax({
  url: "https:my_url",
  data: {my data: my_data},
  method : "POST",
  success: function (result) {
     _this.setState({uploading:'success'})
  },
  error: function (error) {
     _this.setState({uploading:'failure'})
   }
  });