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

Question

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

但我指望在这里获取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});
  }

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

Answer 1

您的代码中存在几个问题：

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

看来您想要做的是用一个不错的编辑图标替换文件浏览器的ui。

HTML label元素及其for属性可以为您提供帮助。

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

    <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;"/> 

Answer 2

  <input type="file" id="file" style={{display: "none"}}
    onChange={(e) => this.onChangeFile(e)}/>
    <label htmlFor="file" >
      <span className='fa fa-edit edit-icon'> </span>
    </label>



  onChangeFile = (event)=> {
    console.log('event.target.files[0]', event.target)
  }

在这里，我只是将标签与输入元素绑定在一起。 display:none输入。 它对我有用。