Explore React

Handling events

DEMO

Drag me around!

Console

Some commonly used event handlers include onClick for buttons, onChange for form inputs and onSubmit for form submissions.

DraggableCircle.jsx.jsx

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

  const handleDragStart = () => {
    console.log("Started dragging!");
  };

  const handleDragEnd = () => {
    console.log("Finished dragging!");
  };


  return (
    <DemoContainer>
      <Hint>Drag me around!</Hint>
      <Circle
        onClick={handleClick}
        onDragStart={handleDragStart}
        onDragEnd={handleDragEnd}
      />
    </DemoContainer>
  );
};

export default HandlingEvents;

Note: Code snippets do not include styling details unless they are the focus of the exercise.