React js執行提交功能

Question

我的反應應用程序上有一個簡單的搜索框。 該框應該讓用戶輸入一個短語，然后在按下回車鍵時執行另一個react.js函數。 我已經嘗試過每一個組合（把表格放在一個表格中，不在表格中，在提交onSubmit ），但是當用戶輸入信息並按下回車時，我似乎無法阻止頁面“重新加載”。

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

編輯是的，您可以通過元素中的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> 

檢查React 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>
$(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文件：

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

            }
    }

}
?>