ReactJS - <input/>の中にある 'Enter'キーを押してメソッドをトリガーする方法はありますか？

Question

onChangeと値だけを使用し、<input/>の中にフォーカスしている間、好ましくはjQueryを使用しないで、 'Enter'キーを押してメソッドをトリガする方法はありますか？ユーザがname文字列の状態を更新するために、 'Enter'キーを押すだけでよいからです。ここで

はコードです：

constructor(props) { 
    super(props); 

    this.state = { 
     name: '', 
    } 
    } 

    textChange(event) { 
    this.setState({ 
     name: event.target.value, 
    }) 
    } 

    //Would like to trigger this once 'Enter' key is pressed while focused inside `<input/>` 
    enterPressed() { 
    var name = this.state.name; 
    } 

    render() { 
    return (
     <input 
      placeholder='Enter name' 
      onChange={this.textChange.bind(this)} 
      value={this.state.name} 
     /> 
    ) 
    } 

Answer 1

この結果を得るために単独でのonchangeメソッドを使用することはできませんしてあなただけの何

確認キーを押すようにする必要があります行うことができます使用することは、のようになどの主要なイベントに反応します

今

<input 
    placeholder='Enter name' 
    onChange={this.textChange.bind(this)} 
    value={this.state.name} 
    onKeyPress={this.enterPressed.bind(this)} 
/> 

、キーを入力して検出するにenterPressed機能を変更します。

enterPressed(event) { 
    var code = event.keyCode || event.which; 
    if(code === 13) { //13 is the enter keycode 
     //Do stuff in here 
    } 
} 

これは、input要素にイベントリスナーを追加することです。 React's Keyboard Eventsを参照してください。次に、イベント時にenterPressedがトリガーされ、今度はenterPressedがキーコードを検出し、13の場合は何らかの処理を行います。

ここにイベントを示すfiddleがあります。

---

注：onKeyPressとonKeyDownイベントは、ユーザーのプレスに瞬時にトリガします。これに対処するのにonKeyUpを使うことができます。

Answer 2

あなたの入力にonKeyPressイベントを追加し、それはあなたが実行したい機能を等しくすることができます。引数として関数に渡されたイベントを使用してキー入力

は残念ながらちょうど

Answer 3

使用onKeyPressして反応によってあなたのための正規化されたクロスブラウザで結果のイベントオブジェクトのkeyプロパティ、：

<meta charset="UTF-8"> 
 
<script src="https://unpkg.com/react@15.3.1/dist/react.js"></script> 
 
<script src="https://unpkg.com/react-dom@15.3.1/dist/react-dom.js"></script> 
 
<script src="https://unpkg.com/babel-core@5.8.38/browser-polyfill.min.js"></script> 
 
<script src="https://unpkg.com/babel-core@5.8.38/browser.min.js"></script> 
 
<div id="app"></div> 
 
<script type="text/babel"> 
 

 
var App = React.createClass({ 
 
    getInitialState() { 
 
    return { 
 
     name: '' 
 
    } 
 
    }, 
 
    handleChange(e) { 
 
    this.setState({name: e.target.value}) 
 
    }, 
 
    handleKeyPress(e) { 
 
    if (e.key === 'Enter') { 
 
     alert('Enter pressed') 
 
    } 
 
    }, 
 
    render() { 
 
    return <input 
 
     placeholder='Enter name' 
 
     onChange={this.handleChange} 
 
     onKeyPress={this.handleKeyPress} 
 
     value={this.state.name} 
 
    /> 
 
    } 
 
}) 
 

 
ReactDOM.render(<App/>, document.querySelector('#app')) 
 

 
</script>

申し訳