Fehler beim Erstellen onKeyPress "Enter" ReactJS

Question

Ich bin wirklich neu zu ReactJS und ich bin nicht wirklich weit mit meinen Studien auf React gegangen, ich versuche, ein Suchfeld einzurichten, die die Abfrage zurückgibt, aber für jetzt ich bin ein nicht erfasster Typeerror erhalten: Kann nicht Eigentum ‚keyCode‘ undefinierter auf

if(keyCode==='13') 

lesen Was ich versuche zu tun, jedes Mal wenn ich ‚Enter‘ auf meine Textbox treffen würde ich die console.log bekommen

Hier ist, was ich habe

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> 
    ); 

}; 

versucht zu tun

Jede Art von Hilfe würde sehr geschätzt werden.

Answer 1

Sie benötigen

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

und

onKeyPress={searchQuery} 

Hier verwenden Code-Schnipsel des Codes ausgeführt wird.

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>

Answer 2

ich weiß nicht sehr gut reagieren, aber es sollte wie

onKeyPress={searchQuery} 

Type ‚Funktionsname‘, ohne Argumente sein.