javascript - React js 在提交时执行函数

Question

我的 React 应用程序上有一个简单的搜索框。该框应该让用户输入一个短语，然后在按下 Enter 键时执行另一个 react.js 函数。我已经尝试了每种组合(将框放在表单中，而不是放在表单中，onSubmit等)，但当用户输入信息和时，我似乎无法阻止页面“重新加载”按 Enter 键。

HTML:

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

React JS 代码:

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

我只需要当用户在搜索框中键入 Enter 键时运行 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 )