創建onKeyPress時出現錯誤「Enter」ReactJS

我對ReactJS真的很陌生，而且我還沒有真正走過很多關於React的研究，我試圖設置一個返回查詢的搜索框，但現在我發現了一個遺漏的類型錯誤：無法讀取的未定義的屬性「鍵代碼」上創建onKeyPress時出現錯誤「Enter」ReactJS

if(keyCode==='13')

我想要做的是，每次我打「回車」在我的文本框，我會得到的console.log

這是我試過的

var searchQuery = (e) => { 
    var textInput = document.getElementById('searchQuery'); 
     if(e.keyCode === '13'){ 
      console.log('Enter pressed'); 
     }; 
    }; 

const SearchBar =() => { 
    debugger; 

    return (
    <div className="search-bar"> 
     <input type="text" id="searchQuery" placeholder="Enter Query" onKeyPress={searchQuery(event)}/> 
    </div> 
    ); 

};

任何形式的幫助將不勝感激。

來源

2017-05-08 Alex Luthor

您需要使用

var keyCode = e.which || e.keyCode; 
     if(keyCode === 13){ 
      console.log('Enter pressed'); 
     }; 
    };

和

onKeyPress={searchQuery}

這裏運行代碼的代碼段。

var searchQuery = (e) => { 
 
    var textInput = document.getElementById('searchQuery'); 
 
    var keyCode = e.which || e.keyCode; 
 
     if(keyCode === 13){ 
 
      console.log('Enter pressed'); 
 
     }; 
 
    }; 
 

 
const SearchBar =() => { 
 
    debugger; 
 

 
    return (
 
    <div className="search-bar"> 
 
     <input type="text" id="searchQuery" placeholder="Enter Query" onKeyPress={searchQuery}/> 
 
    </div> 
 
    ); 
 

 
}; 
 

 
ReactDOM.render(
 
    <SearchBar/>, 
 
    document.getElementById('root') 
 
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script> 
 
<div id="root"> 
 
</div>

來源

2017-05-08 10:20:03 Santosh

謝謝，你能解釋我的工作怎麼不起作用？你爲什麼這樣做？這將是非常有益的。 –

按鍵返回字符值，在這種情況下鍵碼將爲0。 'which'屬性返回觸發onkeypress事件的密鑰的Unicode字符代碼。您可以在w3文檔https://www.w3.org/TR/DOM-Level-3-Events/#event-type-keypress和'which'的mozilla文檔中閱讀更多內容https://developer.mozilla.org/EN-US /文檔/網絡/ API /的KeyboardEvent /這 – Santosh

我不知道的反應非常好，但它應該是一樣

onKeyPress={searchQuery}

類型「功能名」，不帶參數。

來源

2017-05-08 10:09:49 dasiekjs

感謝，這是正確的，但是當它進入我的if語句，當我用調試器，它不檢測的「Enter」鍵的鍵碼，小心一些啓發？謝謝 –

創建onKeyPress時出現錯誤「Enter」ReactJS

回答

相關問題