未経験からのReact入門『TypeScript』|イベント

概要 #

前回簡単なコンポーネント操作について、説明しました。
今回はイベントの起動方法と値の操作方法について記載します。

イベント #

学習用にイベント起動して、アラートを出力するコードを作成しました。

全体コードは以下の通りとなります。

import React from 'react';
interface state {
  value: string;
}
class Greeting extends React.Component<{}, state> {
  constructor(props: {}) {
    super(props);
    this.state = {
      value: ''
    };
    this.changeMessage = this.changeMessage.bind(this)
    this.outMessage = this.outMessage.bind(this)
  }
  private outMessage() {
    alert(this.state.value)
  }
  private changeMessage(e: React.ChangeEvent<HTMLInputElement>) {
    this.setState({ value: e.target.value })
  }
  render() {
    return <div>
      <input placeholder="enter greeting" value={this.state.value} onChange={this.changeMessage}/>
      <button type="submit" onClick={this.outMessage}>add Message</button>
      <p>アラートでメッセージ「{this.state.value}」を出力</p>
      </div>
  }
}
export default Greeting;

コード解説 #

TypeScript で state を使う場合、インターフェスを自作しなければいけません。

以下コードでインターフェースを事前に自作しておきます。

interface state {
  value: string;
}

以下コードは決まり文句みたいなものです。

関数内で setState などの React が提供する関数を使うためには関数をバインドする必要があります。

バインドせずに setState を使いたい場合は、アロー関数を使うなどの方法も考えられますが、今回はバインドします。

この項目を付けない場合は以下エラーが表示されます。

Uncaught TypeError: Cannot read property ‘setState’ of undefined

this.changeMessage = this.changeMessage.bind(this)
this.outMessage = this.outMessage.bind(this)

イベントを作成しています。

outMessage では、state 内部の value を alert で出力し、
changeMessage では、input 要素に変更があるたびに input value の値を setState 関数を使用して、格納しています。

private outMessage() {
  alert(this.state.value)
}
private changeMessage(e: React.ChangeEvent<HTMLInputElement>) {
  this.setState({ value: e.target.value })
}

react で定義した関数を呼ぶ方法はとても簡単です。

イベントハンドラー = {function name}と記述するだけで実行可能です。

以下コードを確認し、感覚で覚えてしまいましょう。

render() {
  return <div>
    <input placeholder="enter greeting" value={this.state.value} onChange={this.changeMessage}/>
    <button type="submit" onClick={this.outMessage}>add Message</button>
    <p>アラートでメッセージ「{this.state.value}」を出力</p>
    </div>
}

まとめ #

とても簡単だったかと思います。

関数をバインドしないとダメなところが感覚的にわかりづらい場合は、アロー関数で以下のように修正してみましょう。

import React from 'react';
interface state {
  value: string;
}
class Greeting extends React.Component<{}, state> {
  constructor(props: {}) {
    super(props);
    this.state = {
      value: ''
    };
  }
  private outMessage =()=> {
    alert(this.state.value)
  }
  private changeMessage = (e: React.ChangeEvent<HTMLInputElement>) =>{
    this.setState({ value: e.target.value })
  }
  render() {
    return <div>
      <input placeholder="enter greeting" value={this.state.value} onChange={this.changeMessage}/>
      <button type="submit" onClick={this.outMessage}>add Message</button>
      <p>アラートでメッセージ「{this.state.value}」を出力</p>
      </div>
  }
}
export default Greeting;

どちらでもお好きな方で実装することが可能です。

以上です。