input type=file 画面有两个及以上input的时候，如何清除每个input的文件域。

Question

画面上有两个input type=file的标签，我想做到点击任何一个都可以清空文件域，但是现在却不行，看一下效果，第一个可以删除，第二个删除之后，名字还是留在上面，删除不掉。

我的代码是这样子的：

import React from 'react';

import constant from '../../../constant/constant';
import {generateHibikiUrl, getRandomValue} from '../../../util/util';
import Icon from '../../common/misc/Icon.react';

class ImageEdit extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      file: null,
      imagePreviewUrl: null,
      rand: getRandomValue()
    };
  }

  updateData(file) {
    var {item, uploadFile} = this.props;
    var itemId = item.id;
    var file = this.state.file;
    item['imagePreviewUrl'] = this.state.imagePreviewUrl;
    var value = {
      file: file
    };
    uploadFile(item, file);
  }

  handleImageChange(e) {
    e.preventDefault();
    var reader = new FileReader();
    var file = e.target.files[0];
    reader.onloadend = () => {
      this.setState({
        file: file,
        imagePreviewUrl: reader.result
      });
      this.updateData();
    };
    reader.readAsDataURL(file);
  }

  deleteImage() {
    this.setState({
      file: null,
      imagePreviewUrl: null
    });
    this.props.deleteImage(this.props.item);
    var file = document.getElementById('file');
    file.value = '';
  }

  render() {
    var {binderId, documentId, item, isPreview} = this.props;
    var itemId = item.id;

    if(isPreview){
      var url = this.props.item.imagePreviewUrl;
    }else {
      var url = item.value && item.value.name ? generateHibikiUrl(`CABImageDownload.do?binderId=${binderId}&itemId=${itemId}&recordId=${documentId}&${this.state.rand}`) : null;
    }

    var loading = item.status === constant.STATUS_UPDATING ?
      <Icon icon='spin' className='orange'/> : null;
    var uploadButton = <input type='file' id='file' onChange={(e) => this.handleImageChange(e)}/>;
    var img = url ? <img src={url} className='img-block'/> : null;
    var deleteButton = url ?
      <div className='delete-pink' onClick={this.deleteImage.bind(this)}>
        <Icon icon='delete'/>
      </div> : null;
    return (
      <div>
        <div className='img-loading-block'>
          {img}
          {loading}
          {deleteButton}
        </div>
        {uploadButton}
      </div>
    );
  }
}

ImageEdit.propTypes = {
  application: React.PropTypes.object.isRequired,
  item: React.PropTypes.object.isRequired,
  binderId: React.PropTypes.string.isRequired,
  documentId: React.PropTypes.string.isRequired,
  updateItemValue: React.PropTypes.func.isRequired,
  deleteImage: React.PropTypes.func.isRequired,
  uploadFile: React.PropTypes.func.isRequired
};

ImageEdit.displayName = 'ImageEdit';

export default ImageEdit;

Answer 1

要把那个 input 的 value 值去掉

Answer 2

value = null;

Answer 3

看楼上的评论说获取不到input，可以获取第一个，然后找它后面的或者兄弟元素啊。