【React初心者メモ】イベントハンドラ

# Reactでのイベントハンドラ
イベントハンドラとは、ユーザーの操作やブラウザの動作などのイベントが発生したときに呼び出される関数のことです。Reactでのイベントハンドラの一般的な使い方は以下のようになります。

１． JSX内でイベントハンドラを属性として指定する
```
<input type="text" onChange={handleChange} />
```

２． イベントハンドラ関数を定義する
```
const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
  console.log(e.target.value)  // 入力された値を取得できる
}
```
３． 状態（state）を更新してUIに反映させる
```
import React, { useState } from 'react'

function Example() {
  const [text, setText] = useState('')

  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    setText(e.target.value)  // 入力値をstateにセット
  }

  return (
    <div>
      <input type="text" onChange={handleChange} value={text} />
      <p>入力値: {text}</p>
    </div>
  )
}
```

# 様々なイベントハンドラ

### 1. onChange
onChangeは入力欄の値が変わったときに発生するイベントです。
```
// <input>の例
const [inputValue, setInputValue] = useState('');

const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
  setInputValue(e.target.value);
};

return (
  <label>
    Input:
    <input type="text" value={inputValue} onChange={handleInputChange} />
  </label>
);
```
```
// <textarea>の例
const [textareaValue, setTextareaValue] = useState('');

const handleTextareaChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
  setTextareaValue(e.target.value);
};

return (
  <label>
    Textarea:
    <textarea value={textareaValue} onChange={handleTextareaChange} />
  </label>
);
```
```
// <select>の例
const [selectValue, setSelectValue] = useState('');

const handleSelectChange = (e: React.ChangeEvent<HTMLSelectElement>) => {
  setSelectValue(e.target.value);
};

return (
  <label>
    Select:
    <select value={selectValue} onChange={handleSelectChange}>
      <option value="">選択してください</option>
      <option value="apple">りんご</option>
      <option value="banana">バナナ</option>
      <option value="cherry">さくらんぼ</option>
    </select>
  </label>
);
```

### 2. onClick
onClickはボタンなどがクリックされたときに発生するイベントです。
```
const [message, setMessage] = useState('');

const handleClick = (e: React.MouseEvent<HTMLButtonElement>) => {
  setMessage('ボタンがクリックされました！');
};

return (
  <>
    <button onClick={handleClick}>クリックしてね</button>
    {message && <p>{message}</p>}
  </>
);
```

### 3. onSubmit
onSubmitはフォームの送信時に発生するイベントです。
```
const [inputValue, setInputValue] = useState('');
const [message, setMessage] = useState('');

const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
  setInputValue(e.target.value);
};

const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
  e.preventDefault();
  setMessage(`送信されました！入力値: ${inputValue}`);
};

return (
  <form onSubmit={handleSubmit}>
    <label>
      Input:
      <input type="text" value={inputValue} onChange={handleInputChange} />
    </label>
    <button type="submit">送信</button>
    {message && <p>{message}</p>}
  </form>
);
```

### 4. onFocus
onFocusは入力欄にフォーカス（クリックやタブで選択）した時に発生するイベントです。

```
const [message, setMessage] = useState('');

const handleFocus = (e: React.FocusEvent<HTMLInputElement>) => {
  setMessage('入力欄にフォーカスしました');
};

return (
  <>
    <input type="text" onFocus={handleFocus} />
    {message && <p>{message}</p>}
  </>
);
```
### 5. onInput
onInputはユーザーがキーボードで文字を入力したり、貼り付けしたりした瞬間に発生するイベントです。
```
const [inputValue, setInputValue] = useState('');

const handleInput = (e: React.FormEvent<HTMLInputElement>) => {
  const target = e.target as HTMLInputElement;
  setInputValue(target.value);
};

return (
  <>
    <input type="text" onInput={handleInput} />
    <p>入力中の値: {inputValue}</p>
  </>
);
```

# イベント型
Reactでは、ブラウザのネイティブイベントをラップした独自のイベントシステム（SyntheticEvent）を使っており、それに対応する型が多数用意されています。

onChange：React.ChangeEvent\<HTMLInputElement\>
onClick：React.MouseEvent\<HTMLButtonElement\>
onSubmit：React.FormEvent\<HTMLFormElement\>
onInput：React.FormEvent\<HTMLInputElement\>