Basics of Handling Events in React

You can simply assign a function to any of the on* props for native HTML components e.g. onClick for a button

App.tsx

export default function App() {
  const onButtonClick = () => {
    console.log('Clicked');
  };

  return (
    <div>
      <button onClick={onButtonClick}>Click Me</button>
    </div>
  );
}

TypeScript types for Event Handlers

You can use an the type for the on* prop to ensure that our callback accepts well-typed arguments for any events that are passed in.

For example for button.onClick the type is React.MouseEventHandler<HTMLButtonElement>.

App.tsx

export default function App() {
  const onClick: React.MouseEventHandler<HTMLButtonElement> = (event) => {
    console.log("Clicked", { event }, { nativeEvent: event.nativeEvent });
  };

  return (
    <div>
      <button onClick={onClick}>Click Me</button>
    </div>
  );
}

Note that react wraps native events in a SyntheticEvent to ensure cross browser compatibility but you can still access the underlying event using event.nativeEvent. However for most cases the event object is what you should use.

Uncontrolled Form Elements

You can let input elements maintain their state internally by only providing an initial defaultValue. You can still listen to the value changes by using onChange event.

App.tsx

export default function App() {
  return (
    <div>
      <input
        defaultValue="Hi Fam!"
        onChange={(e) => {
          console.log(e.target.value);
        }}
      />
    </div>
  );
}

Controlled Form Elements

If you wire the value of an input to a variable, the component is considered controlled. It's rendered value will only change if the value you provide changes. We can utilize useState for this purpose.

App.tsx

import { useState } from "react";

export default function App() {
  const [value, setValue] = useState("Hi Fam!");

  return (
    <div>
      <input
        value={value}
        onChange={(e) => {
          setValue(e.target.value);
          console.log(e.target.value);
        }}
      />
    </div>
  );
}

Notice that the type of the event is inferred by TypeScript when the event handler is defined inline. In this case it is React.ChangeEvent<HTMLInputElement>.

Checkbox in React

A checkbox in html is simply an input with type="checkbox". And no surprise, this is exactly how you can create a checkbox in React.

You can also add a label to the checkbox and ensure they are linked by using the same value for input.id and label.htmlFor.

To control a checkbox you use the checked prop and wire it to a boolean.

App.tsx

App.module.css

import { useState } from 'react';
import styles from './App.module.css';

export default function App() {
  const [checked, setChecked] = useState(false);
  const toggle = () => setChecked(checked => !checked);

  return (
    <div className={styles.checkbox}>
      <input
        type='checkbox'
        id='accept'
        checked={checked}
        onChange={toggle}
      />
      <label htmlFor='accept'>
        I accept the terms and conditions.
      </label>
    </div>
  );
}

Transcript