Reactイベント

Reactアプリケーションでイベントを操作する方法を学ぶ

Reactは、イベントを管理する簡単な方法を提供します。さよならを言う準備をするaddEventListener

州に関する前回の記事で、この例を見ました。

const CurrencySwitcher = props => {
  return (
    <button onClick={props.handleChangeCurrency}>
      Current currency is {props.currency}. Change it!
    </button>
  )
}

しばらくJavaScriptを使用している場合、これは昔ながらのようですJavaScriptイベントハンドラーただし、今回はHTMLではなくJavaScriptですべてを定義し、文字列ではなく関数を渡します。

Reactではすべてにキャメルケースを使用するため、実際のイベント名は少し異なります。onclickになりますonClickonsubmitになりますonSubmit

参考までに、これはJavaScriptイベントが混在する古い学校のHTMLです。

<button onclick="handleChangeCurrency()">...</button>

イベントハンドラー

Componentクラスのメソッドとしてイベントハンドラーを定義するのは慣例です。

class Converter extends React.Component {
  handleChangeCurrency = event => {
    this.setState({ currency: this.state.currency === '€' ? '
'€'})}}

すべてのハンドラーは、クロスブラウザーに準拠するイベントオブジェクトを受け取ります。W3CUIイベントの仕様

練るthisメソッドで

メソッドをバインドすることを忘れないでください。デフォルトでは、ES6クラスのメソッドはバインドされていません。これが意味するのはthisメソッドを矢印関数として定義しない限り、は定義されません。

class Converter extends React.Component {
  handleClick = e => {
    /* ... */
  }
  //...
}

Babelでプロパティ初期化構文を使用する場合(でデフォルトで有効になっていますcreate-react-app)、それ以外の場合は、コンストラクターで手動でバインドする必要があります。

class Converter extends React.Component {
  constructor(props) {
    super(props)
    this.handleClick = this.handleClick.bind(this)
  }
  handleClick(e) {}
}

イベントリファレンス

サポートされているイベントはたくさんあります。ここに要約リストがあります。

クリップボード

組成

キーボード

フォーカス

マウス

選択

接する

UI

マウスホイール

メディア

画像

アニメーション

遷移

私の無料ダウンロードReactハンドブック


その他の反応チュートリアル: