时间戳

首页 > 解决方案 > 单击图像图标时，请参阅 REACT.js 中的输入类型文件功能

javascript - 单击图像图标时，请参阅 REACT.js 中的输入类型文件功能

问题描述

这里我有图像图标，带有它的编辑图标。当我单击编辑图标时，会触发图像输入类型文件并选择相同的文件！

但我想在这里得到 event.target.file ......

<span className='fa fa-edit edit-icon'
    onClick={(e)=>{this.onChangeFile.click(e)}}> </span>

<input type="file" id="file"
    ref={(ref) => this.onChangeFile = ref}
    style={{display: "none"}}/>

方法：

但我想在这里得到 event.target.file ......

onChangeFile =(event)=> {
    console.log('event.target.files', event.target.files)
    event.stopPropagation();
    event.preventDefault();
    var file = event.target.files[0];
    console.log('file.....:', file);
    this.setState({file});
  }

在这里，我正在寻找日志中的文件路径。当前它没有调用该方法。

标签： javascripthtmlreactjs

解决方案

您的代码中有几个问题：

  • 在挂载时，您的onChangeFile处理程序将被 ref 回调删除ref={(ref) => this.onChangeFile = ref}
  • 您没有在onchange输入事件上绑定任何事件处理程序。

看来您要做的是用漂亮的编辑图标替换文件浏览器的 ui。

Htmllabel元素及其for属性可以帮助您。

以下代码段是纯 html/js（无反应），但如果您更改for其 React 对应部分的纯 html 属性htmlFor并且如果您将onChangeFile处理程序绑定为 jsx 方式，则将在您的组件中工作

    <input
        type="file"
        id="file"
        onChange={this.onChangeFile}
        style={{display: "none"}}
    />

代替document.getElementById('file').addEventListener('change', onChangeFile);

这里不需要参考。

所以总结一下：

  • 将您的 span 图标包装到一个label元素中。
  • 将该属性设置htmlFor为与文件输入的属性相同的值id。
  • 将 onFileChange 处理程序附加到文件输入的 onChange 事件

就是这样，该图标将充当您的隐藏输入。

onChangeFile = (event)=> {
  console.log('event.target.files[0]', event.target.files[0])
  event.stopPropagation();
  event.preventDefault();
  var file = event.target.files[0];
  console.log('file.....:', file);
}

document.getElementById('file').addEventListener('change', onChangeFile);
.edit-icon {
  display: inline-block;
  width: 20px;
  height: 20px;
  background-color: #EEAA11;
}
<label for="file"><span class='fa fa-edit edit-icon'> </span><label>

<input type="file" id="file" style="display: none;"/>

推荐阅读