Reagieren js Funktion ausführen beim Senden

Question

Ich habe ein einfaches Suchfeld auf meiner reagieren App. Die Box sollte den Benutzer eine Phrase eingeben lassen und dann eine andere react.js Funktion ausführen, wenn sie die Eingabetaste drücken. Ich habe jede Kombination ausprobiert (Box in ein Formular, nicht in einer Form, onSubmit, etc.), aber ich kann nicht scheinen, um die Seite von "Neuladen" zu stoppen, wenn der Benutzer die Informationen eingibt und drückt Enter.

HTML:

<input className="input" placeholder="Type it Here..." type="text" name="key" id="searchgrid" /> 

Reagieren JS-Code:

searchForMatches(){ 
    var value = document.getElementById("searchgrid").value; 
    console.log(value); 
} 

Ich brauche nur die searchForMatches() Funktion ausgeführt wird, wenn der Benutzer den Schlüssel in das Suchfeld eingeben.

Danke.

Answer 1

EDIT Ja, erhalten Sie die Taste mit onKeyPress Ereignis in Element gedrückt das Snippet prüfen

var Comp = React.createClass({ 
 
    searchForMatches(e) { 
 
     var value = String.fromCharCode(e.charCode) 
 
     this.setState({ 
 
     keyPressed: value 
 

 
     }) 
 
    }, 
 
    getInitialState() { 
 
     return ({ 
 
     keyPressed: '' 
 
     }) 
 
    }, 
 
    render() { 
 
     return (<div> 
 
     <label> Last Key Pressed: { 
 
      this.state.keyPressed 
 
     } < /label><br/> 
 
     < input className = "input" 
 
     placeholder = "Type it Here..." 
 
     type = "text" 
 
     name = "key" 
 
     id = "searchgrid" 
 
     onKeyPress = { 
 
      this.searchForMatches 
 
     } 
 
     /> 
 
     
 
    </div > 
 
    ) 
 
    } 
 
}) 
 

 
ReactDOM.render(< Comp/> , document.getElementById('foo'))

<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='foo'></div>

Überprüfen Sie die Systemereignisse auf JS reagieren (https://facebook.github.io/react/docs/events.html)

Answer 2

Für Suchoptionen können Sie Folgendes tun:

HTML:

<div class="pull-right" style='display:block;'> 
        <span style="color:red"><strong>Search Products</strong></span> 
        <form method="get"> 

         <input name="keysearch" value="" placeholder="name" id="keysearch" type="text" class="form-control"> 
         <span id="loading"></span> 
        </form> 
        <div id="result"></div> 
       </div> 

Skript:

<script> 
$(document).ready(function(){ 
    var req = null; 
    $('#keysearch').on('keyup', function(){ 
    var key = $('#keysearch').val(); 
    if (key && key.length > 0){ 
     $('#loading').css('display', 'block'); 
     if (req) 
     req.abort(); 
     req = $.ajax({ 
     url : 'fetch_records.php', 
     type : 'GET', 
     cache : false, 
     data : { 
      keysearch : key, 
     }, 
     success : function(data) 
     { 
      console.log(data) 
      if (data) 
      { 
      $('#loading').css('display', 'none'); 
      $("#result").html(data).show(); 

     $("#result").css('position', 'absolute'); 

     $("#result").css('z-index', '1'); 

     // style='display:block; position :absolute; z-index:1' 
     } 
    } 
    }); 
} 
else 
{ 
    $('#loading').css('display', 'none'); 
    $('#result').css('display', 'none'); 
} 



}); 
}); 
</script> 

PHP Fetch-records.php Datei:

<?php 
$conn = mysqli_connect('localhost','root', '','Name_OF_DB'); 
if(isset($_GET['keysearch'])) 
{ 
    $search = $_GET['keysearch']; 
    $search = mysqli_real_escape_string($conn,$search); 

    // $data = "SELECT * FROM products "; 
    $data = "SELECT * FROM products WHERE product_title LIKE '%{$search}%' order by product_id "; 
    // $query = query ("SELECT * FROM products WHERE product_category_id = ".$id." ORDER BY product_price DESC"); 

    $result = mysqli_query($conn,$data); 
    if (mysqli_num_rows($result)>0) 
    { 
     while($row= mysqli_fetch_assoc($result)) 
      { 



       echo"<a href='create_a_new_page_brother.php?id={$row['product_id']}&price=0' class='list-group-item'>{$row['product_title']}</a>"; 

      } 
    } 

} 
?>