Question

我的反应应用程序上有一个简单的搜索框。该框应该让用户输入一个短语，然后在按下回车键时执行另一个react.js功能。我已经尝试了所有组合（将表格放在表格中，而不是表格中，onSubmit等），但我似乎无法停止页面重新加载＆＃34;当用户输入信息并按回车键时。

HTML：

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

React JS Code：

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

            }
    }

}
?>

React js执行提交功能

2 个答案: