ReactBeginner

Event Handling

onClick, onChange, onSubmit — event handler, event object ও preventDefault — বাংলায়।

9টি অংশবাংলা ভাষায়

Event handler

onClickjsx

jsx

function Counter() {
  const handleClick = () => {
    console.log("Clicked!");
  };

  return <button onClick={handleClick}>Click</button>;
}

// inline arrow
<button onClick={() => console.log("Clicked!")}>Click</button>

event object

event argumentjsx

jsx

function Input() {
  return (
    <input
      onChange={(event) => {
        console.log(event.target.value);
      }}
      placeholder="লিখুন…"
    />
  );
}

সাধারণ event

Event	যখন
`onClick`	ক্লিক
`onChange`	input/select/textarea-তে পরিবর্তন
`onSubmit`	form submit
`onMouseEnter` / `onMouseLeave`	hover enter/exit
`onFocus` / `onBlur`	ফোকাস পাওয়া/হারানো
`onKeyDown`	কীবোর্ড চাপা
`onScroll`	স্ক্রল

preventDefault

form submit আটকানোjsx

jsx

function Form() {
  return (
    <form
      onSubmit={(event) => {
        event.preventDefault(); // page reload থামে
        console.log("Form submitted!");
      }}
    >
      <input type="text" name="query" />
      <button type="submit">Search</button>
    </form>
  );
}

handler function করুন

onClick={() => doSomething()} — inline arrow চলবে, কিন্তু function define করে onClick={handleClick} লিখা পরিষ্কার ও test-able।

শেষ প্যারায় নিজে practice করুন — কোড কপি করে নিজের এডিটরে চালিয়ে দেখুন।