单击图像图标时,请参阅中的“输入类型文件”函数REACT.js公司

您的代码中有几个问题:

• 在你的车上 onChangeFile ref={(ref) => this.onChangeFile = ref}
• 上没有绑定任何事件处理程序 onchange

Html格式 label for 属性是帮助你的。

下面的代码片段是纯html/js(no react),但是如果您更改了纯html,它将在您的组件中工作 对于 其React counter部分的属性 htmlFor 如果你把 onChangeFile文件 处理jsx

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

而不是 document.getElementById('file').addEventListener('change', onChangeFile);

这里不需要参考文献。

• 将你的跨度图标包装成 元素。
• 设置 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;"/>

  <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 输入。