How do you handle forms and events in React? React में forms और events कैसे handle करते हैं?

// Controlled component (form input with state)
function LoginForm() {
    const [email, setEmail] = useState('');
    const [password, setPassword] = useState('');
    
    const handleEmailChange = (e) => {
        setEmail(e.target.value);
    }
    
    const handlePasswordChange = (e) => {
        setPassword(e.target.value);
    }
    
    const handleSubmit = (e) => {
        e.preventDefault();
        console.log('Email:', email, 'Password:', password);
    }
    
    return (
        <form onSubmit={handleSubmit}>
            <input type='email' value={email} onChange={handleEmailChange} />
            <input type='password' value={password} onChange={handlePasswordChange} />
            <button type='submit'>Login</button>
        </form>
    );
}

// Simplified with single handler
function Form() {
    const [formData, setFormData] = useState({
        name: '',
        email: '',
        message: ''
    });
    
    const handleChange = (e) => {
        const { name, value } = e.target;
        setFormData(prev => ({
            ...prev,
            [name]: value
        }));
    }
    
    const handleSubmit = (e) => {
        e.preventDefault();
        console.log('Form data:', formData);
    }
    
    return (
        <form onSubmit={handleSubmit}>
            <input name='name' value={formData.name} onChange={handleChange} />
            <input name='email' value={formData.email} onChange={handleChange} />
            <textarea name='message' value={formData.message} onChange={handleChange} />
            <button type='submit'>Submit</button>
        </form>
    );
}

// Event handling
function ClickDemo() {
    const handleClick = () => alert('Button clicked!');
    
    return (
        <div>
            <button onClick={handleClick}>Click me</button>
            <button onClick={() => console.log('Clicked')}>Arrow function</button>
            <input onChange={(e) => console.log(e.target.value)} />
        </div>
    );
}

// Select and checkbox
function SelectDemo() {
    const [selected, setSelected] = useState('option1');
    const [checked, setChecked] = useState(false);
    
    return (
        <div>
            <select value={selected} onChange={(e) => setSelected(e.target.value)}>
                <option value='option1'>Option 1</option>
                <option value='option2'>Option 2</option>
            </select>
            
            <input 
                type='checkbox' 
                checked={checked} 
                onChange={(e) => setChecked(e.target.checked)} 
            />
        </div>
    );
}

// Uncontrolled component (using ref)
import { useRef } from 'react';

function UncontrolledForm() {
    const inputRef = useRef(null);
    
    const handleSubmit = (e) => {
        e.preventDefault();
        console.log('Input value:', inputRef.current.value);
    }
    
    return (
        <form onSubmit={handleSubmit}>
            <input ref={inputRef} />
            <button type='submit'>Submit</button>
        </form>
    );
}

// Common events
function EventDemo() {
    return (
        <div>
            <input onFocus={() => console.log('Focus')} />
            <input onBlur={() => console.log('Blur')} />
            <input onKeyDown={(e) => console.log(e.key)} />
            <input onKeyUp={() => console.log('Key up')} />
            <div onMouseEnter={() => console.log('Mouse enter')} />
            <div onMouseLeave={() => console.log('Mouse leave')} />
        </div>
    );
}