freks blog

about

ReactでInputフォームのEnterキーで処理を行う

created: 2019-02-09
特選記事: 出会ってよかったプログラマー本

React version 16.4.2 でinputフォームでのEnterキーを押して処理をしたかった際、

<Input
  type="password"
  placeholder="input password"
  name="password"
  onKeyPress={e =>
    if (e.key == 'Enter') {
      signIn()
    }
  }
/>

としてたのですが、ホットリロードを入れると動かなかったり...

React & event.preventDefault() – Eric Clemmons – Medium
を読んだりして e.preventDefault() を入れ忘れてました..

<Input
  type="password"
  placeholder="input password"
  name="password"
  onKeyPress={e =>
    if (e.key == 'Enter') {
      e.preventDefault()
      signIn()
    }
  }
/>

Enterキーのときだけにしないとキー入力できなくなってしまいます


Amazonのアソシエイトとして、blog.freks.jp は適格販売により収入を得ています。
This site is managed by freks