События (клик, ввода текста)

В качестве примера можно создать текстовое поле, и добавить атрибут onChange, который будет обновлять переменную при каждом изменении значения.

<input type="text" onChange={changeName} defaultValue={name} />

При изменении переменной (состояния), она также автоматически обновится на самой странице.

И создать метод changeName().

import { useState } from 'react';

export default function App () {
  const [name, setName] = useState("React");
    
  function changeName(e) {
    setName(e.target.value);
  }

  return (
    <>
      <input type="text" onChange={changeName} defaultValue={name} />
    </>
  );
}

Пример кода на Playcode

Код выше можно сократить:

import { useState } from 'react';

export default function App () {
  const [name, setName] = useState("React");

  return (
    <>
      <input type="text" onChange={(e) => setName(e.target.value)} defaultValue={name} />
      <p>{name}</p>
    </>
  );
}

Пример кода на Playcode

Также можно передавать атрибуты:

<input type="text" onChange={(e) => changeName(e, "Атрибут")} />