如何在React中檢測<input type =「file」/>上的空選擇？

我有一個組件使用<input type="file" value="" onChange={(e) => callback(e.target.files}/>來獲取用戶選擇的文件。但是，如果用戶取消文件選擇彈出窗口，則回調將永遠不會被調用，因爲沒有任何更改。這是無稽之談，因爲預期的操作是回調函數，用null或空數組調用。如何在React中檢測<input type =「file」/>上的空選擇？

但是如何實現呢？我沒有找到任何相關的事件來聽。

來源

2017-06-18 我不是照耀

糾正我，如果我錯了，但如果用戶取消文件選擇，那麼沒有改變已作出的輸入值，因此沒有必要調用回調 –

@ Sag1v嗨，你的分析的第一部分是正確的，但確實需要調用回調。例如，如果我們嘗試創建異步確認函數，即使用戶單擊取消，也應始終調用回調，因爲取消也意味着某種結果。 –

var godzilla = document.getElementById('godzilla') 
 

 
godzilla.onclick = charge 
 

 
function charge() 
 
{ 
 
    document.body.onfocus = roar 
 
    console.log('chargin') 
 
} 
 
    
 
function roar() 
 
{ 
 
    if(godzilla.files.length) alert('ROAR! FILES!') 
 
    else alert('*empty wheeze*') 
 
    document.body.onfocus = null 
 
    console.log('depleted') 
 
} 
 
//source on findle http://jsfiddle.net/Shiboe/yuK3r/6/

<input type='file' id='godzilla' style='display:none' /> 
 
<button onclick='document.getElementById("godzilla").click()'>mech-godzilla</button>

來源

2017-06-19 10:44:30 Omicron

如何在React中檢測<input type =「file」/>上的空選擇？

回答

相關問題