單擊圖像圖標時，請參考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輸入。 它對我有用。