React-এ ফর্ম

function NameForm() {
  const [name, setName] = useState('');

  return (
    <input
      value={name}
      onChange={(e) => setName(e.target.value)}
    />
  );
}

function NameForm() {
  const [name, setName] = useState('');

  function handleSubmit(e) {
    e.preventDefault(); // stop the browser's default full-page reload
    console.log('Submitted:', name);
  }

  return (
    <form onSubmit={handleSubmit}>
      <input value={name} onChange={(e) => setName(e.target.value)} />
      <button type="submit">Submit</button>
    </form>
  );
}

function SignupForm() {
  const [formData, setFormData] = useState({ name: '', email: '' });

  function handleChange(e) {
    const { name, value } = e.target;
    setFormData({ ...formData, [name]: value }); // computed property name, from ES6
  }

  return (
    <form>
      <input name="name" value={formData.name} onChange={handleChange} />
      <input name="email" value={formData.email} onChange={handleChange} />
    </form>
  );
}

function Preferences() {
  const [subscribed, setSubscribed] = useState(false);

  return (
    <input
      type="checkbox"
      checked={subscribed}
      onChange={(e) => setSubscribed(e.target.checked)} // checked, not value
    />
  );
}