リアクションjsサブミット時に実行機能

Question

私はリアクションアプリで簡単な検索ボックスを持っています。このボックスは、ユーザーが入力したフレーズを入力し、Enterキーを押したときに別のreact.js関数を実行させる必要があります。私はすべての組み合わせ（フォームではなく、フォームではなく、onSubmitなど）を試してみましたが、ユーザーが情報を入力してEnterを押すと、ページを「再読み込み」するのを止められないようです。

HTML：

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

が反応JSコード：

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

は、私はちょうど、ユーザーのタイプはインクルードは、検索ボックスにキーを入力したときに実行するようにsearchForMatches()機能を必要としています。

ありがとうございました。

Answer 1

EDIT はい、あなたは要素 にonKeyPressイベントで押されたキーを取得するスニペット

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>

が反応JS（https://facebook.github.io/react/docs/events.html）

Answer 2

上のシステムイベントをチェックチェック

検索オプションの場合、次の操作を実行できます。

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> 

SCRIPT USED：

<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フェッチrecords.phpファイル：

<?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>"; 

      } 
    } 

} 
?>