react下模擬上傳文件按鈕

實際開發中，往往上傳文件按鈕，經過ui設計一般會有一個好看的ui圖，

這時候往往會去看我們用的ui框架是否已經有類似的樣式，但是一般很難找到一樣的，這時候我們需要自己手寫，來模擬一個上傳文件的按鈕操作？？？
這裏使用原生input type=file實現，這裏在react框架項目中，代碼如下：

<div className={styles.fileName}>附件</div>
<div className={styles.fileArea} onClick={() => {
     let file = 'file_' + i
     this.refs[file].click()
}}>
	<p>+</p>
	<p>選取文件</p>
	<input type="file" ref={'file_' + i} style={{display: 'none'}} onChange={(e) => this.upload(e, i)}/>
</div>
{item.attachmentList && item.attachmentList.map((v, index) => {
return <div key={index} className={styles.fileInfo}>
	<div className={styles.fileItem}>{v.fileName.slice(0, 15) + '...'} 
	<span className={styles.deleteItem} onClick={() => this.deleteFile(v.id, i)}>×</span>
    </div>
 </div>
})}



// 
upload = (e, index) => {
    console.log(index)
    let file = e.target.files[0]
    let fileSize = (file.size) / 1024
    if (fileSize > 1024 * 20) {
      alert('文件大小不得超過 20M')
      return
    }
    let fileNameType = file.name.split('.').pop();
    let fileType = ['pdf', 'doc', 'docx', 'jpg', 'jpeg', 'JPG', 'JPEG', 'png', 'PNG']
    if (fileType.indexOf(fileNameType) < 0) {
      Toast.info('文件格式必須爲 pdf、jpg、png')
      return
    }
    let fileInfo = new FormData()
    if (file) {
      fileInfo.append('file', file)
      fileInfo.append('fileType', 'policy')
    }
    postFormData('/attachment/uploadOne', fileInfo).then((res) => {
        if (res.data.code === '00') {
          let state = this.state;
          console.log(index)
          state.bankInfoList[index].attachmentList.push(res.data.data)
          if (state.bankInfoList[index].attIdArray == null) {
            state.bankInfoList[index].attIdArray = []
            state.bankInfoList[index].attIdArray.push(res.data.data.id)
          } else {
            state.bankInfoList[index].attIdArray.push(res.data.data.id)
          }
          this.setState({state}, () => {
            setStore('bankInfoList', this.state.bankInfoList)
          });
          Toast.info(res.data.codeMsg)
        } else {
          Toast.info(res.data.codeMsg)
        }
      }
    )
  }


deleteFile = (id, index) => {
    let state = this.state;
    state.bankInfoList[index].attachmentList = state.bankInfoList[index].attachmentList.filter((item) => id !== item.id)
    state.bankInfoList[index].attIdArray = state.bankInfoList[index].attIdArray.filter((item) => id !== item)
    this.setState({state}, () => {
      setStore('bankInfoList', this.state.bankInfoList)
    });
    let fileEle = 'file_' + index
    this.refs[fileEle].value = null
  }

通過使用type=file隱藏該文件輸入，通過點擊選取文件來觸發其身上的onchange時間，事件處理過程都在input身上，這裏也實現了上傳成功後文件名展示和刪除文件功能，實現如下圖：