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身上，这里也实现了上传成功后文件名展示和删除文件功能，实现如下图：