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提交时执行功能

回答

相关问题