6-3. イベントハンドラの型を定義する

import { useState } from 'react';
// ここにChangeEventとFormEventをインポートしてください


function App() {
  const [name, setName] = useState<string>("");
  const [message, setMessage] = useState<string>("");
  
  // ここにeの型を追加してください
  const handleChange = (e) => {
    setName(e.target.value);
  };
  
  // ここにeの型を追加してください
  const handleSubmit = (e) => {
    e.preventDefault();
    setMessage(`こんにちは、${name}さん！`);
    setName("");
  };
  
  return (
    <div style={{ padding: '20px', maxWidth: '400px', margin: '0 auto' }}>
      <h2>名前入力フォーム</h2>
      
      <form onSubmit={handleSubmit} style={{ marginTop: '20px' }}>
        <label style={{ display: 'block', marginBottom: '10px' }}>
          名前を入力してください
        </label>
        
        <input 
          type="text"
          value={name}
          onChange={handleChange}
          placeholder="名前"
          style={{ 
            width: '100%',
            padding: '10px',
            fontSize: '16px',
            border: '1px solid #ccc',
            borderRadius: '4px'
          }}
        />
        
        <button 
          type="submit"
          style={{ 
            marginTop: '15px',
            padding: '10px 30px',
            fontSize: '16px',
            backgroundColor: '#007bff',
            color: 'white',
            border: 'none',
            borderRadius: '4px',
            cursor: 'pointer'
          }}
        >
          送信
        </button>
      </form>
      
      {message && (
        <div style={{ 
          marginTop: '30px',
          padding: '15px',
          backgroundColor: '#d4edda',
          border: '1px solid #c3e6cb',
          borderRadius: '4px',
          fontSize: '18px',
          fontWeight: 'bold',
          color: '#155724'
        }}>
          {message}
        </div>
      )}
    </div>
  );
}

export default App;