React js提交時執行功能

我對我的反應應用程序有一個簡單的搜索框。該框應該讓用戶輸入一個短語，然後在他們按下回車鍵時執行另一個react.js函數。我已經嘗試了所有組合（將框放在表單中，而不是表單中，例如onSubmit等），但是當用戶輸入信息並按下回車鍵時，我似乎無法停止「重新加載」頁面。React js提交時執行功能

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()功能，當用戶鍵入回車鍵在搜索框中運行。

謝謝。

來源

2016-06-28 balloway

編輯是的，你在元素與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）

來源

2016-06-28 18:37:31

謝謝！有沒有一種方法可以獲得按下的按鍵，而不是盒子的全部價值？ – balloway

沒關係，只要閱讀你附加的文檔，它就能解決所有問題。再次感謝！ – balloway

即時編輯與按鍵事件代碼 –

-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> 
$(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>"; 

      } 
    } 

} 
?>

來源

2016-06-28 18:53:07

這與React無關.... – erichardson30

React js提交時執行功能

回答

相關問題