reactでonKeyPress Enter

reactで、フォーカスされているinputformでenterが押されたら特定のアクションを実行したいとき。

class InputForm extends Component {
  constructor(props) {
    super(props);
    this.actionWhenPressEnter = this.actionWhenPressEnter.bind(this);
    this.enterListener = this.enterListener.bind(this);
  }

  // enterが押された時に行いたい処理
  actionWhenPressEnter() {
    console.log('pressed enter');
  }

  // enterが押されるのを待つ。
  enterListener(e) {
    if(e.key === 'Enter') {
      e.preventDefault()
      this.actionWhenPressEnter()
    } 
  }

  render() {
    return (
      <div>
        <input
          placeholder='placeholder' 
          onKeyPress={ this.enterListener }
        />
        <button onClick={this.handleClick}> add </button>
      </div>
    );
  }

}

コレダケ。