在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

像這樣invisible CSS類

.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等於'success'時顯示，而失敗消息在等於'failure'時顯示。

然后在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調用將this.state.uploading設置為成功或失敗，具體取決於ajax調用的結果，並顯示相應的消息。

適合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'})
   }
  });