React（+TypeScript）入門 | イベントを扱う

Reactでイベントの扱い方の基本を紹介します。

イベントハンドラ

今回はテキストの入力（inputタグの変更イベント）に応じて別要素の表示が変わるコンポーネントを作成してみます。
次のような動きです。

早速ですが上記のように動くコンポーネントを下に載せます。

MessageBox.tsximport * as React from 'react';
import './Message.css';
 
interface MessageBoxState {
  message: string;
}
 
interface MessageInputEvent extends React.FormEvent<HTMLInputElement> {
    target: HTMLInputElement;
}
 
class MessageBox extends React.Component<{}, MessageBoxState> {
    constructor() {
        super();
        this.state = {
            message: ''
        };
 
        this.handleMessageChange = this.handleMessageChange.bind(this);
    }
 
    handleMessageChange(event: MessageInputEvent) {        
        this.setState({message: event.target.value});
    }
 
    render() {
        return (
            <div className="MessageBox">
                <div className="Message">{this.state.message}</div>
                <input type="text" onChange={this.handleMessageChange} />
            </div>
        );
    }
}
 
export default MessaageBox;

MessageBox.tsx
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36	`import` `* as React from` `'react';` `import` `'./Message.css';` `interface` `MessageBoxState {` `message: string;` `}` `interface` `MessageInputEvent` `extends` `React.FormEvent<HTMLInputElement> {` `target: HTMLInputElement;` `}` `class` `MessageBox` `extends` `React.Component<{}, MessageBoxState> {` `constructor() {` `super();` `this.state = {` `message:` `''` `};` `this.handleMessageChange =` `this.handleMessageChange.bind(this);` `}` `handleMessageChange(event: MessageInputEvent) {` `this.setState({message: event.target.value});` `}` `render() {` `return` `(` `<div className="MessageBox">` `<div className="Message">{this.state.message}</div>` `<input type="text"` `onChange={this.handleMessageChange} />` `</div>` `);` `}` `}` `export` `default` `MessaageBox;`

JSX内のinput要素のonChageに注目してください。ReactのJSXではイベントをキャメルケースで記述します（他の例を出すと、クリックイベントはonClick=~のような記述になります）。
そしてそこにイベントハンドラhandleMessageChangeを渡します。

注意したいのは、コンストラクタでクラスのメソッドをthisにバインドしておく必要がある点です。
バインドを忘れるとundefinedになってしまいます。

TypeScriptのコンパイラ設定で暗黙的なanyを許していない場合、イベントハンドラの引数にもちゃんと型を指定する必要があります。
今回はReact.FormEventを継承するinterfaceを定義し、それを型として用いています。

また、以下のようにアロー関数を用いてプロパティを初期化し、ハンドラをバインドすることも可能です。

MessageBox.tsx...
class MessageBox extends React.Component<{}, MessageBoxState> {
    constructor() {
        super();
        this.state = {
            message: ''
        };
    }
 
    handleMessageChange = (event) => {        
        this.setState({message: event.target.value});
    }
 
    render() {
        return (
            <div className="MessageBox">
                <div className="Message">{this.state.message}</div>
                <input type="text" onChange={this.handleMessageChange} />
            </div>
        );
    }
}
...

MessageBox.tsx
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23	`...` `class` `MessageBox` `extends` `React.Component<{}, MessageBoxState> {` `constructor() {` `super();` `this.state = {` `message:` `''` `};` `}` `handleMessageChange = (event) => {` `this.setState({message: event.target.value});` `}` `render() {` `return` `(` `<div className="MessageBox">` `<div className="Message">{this.state.message}</div>` `<input type="text"` `onChange={this.handleMessageChange} />` `</div>` `);` `}` `}` `...`