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

В качестве примера можно создать текстовое поле, и добавить атрибут 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, "Атрибут")} />

Всплытие и погружение

В JavaScript есть два способа обработки события: всплытие и погружение.

По умолчанию события отрабатываются по всплытию. Но если надо, чтобы они отрабатывались через погружение, то для этого к событию надо добавить строку «Capture».

<!-- Всплытие (по умолчанию) -->
<input type="text" onChange={changeName} defaultValue={name} />

<!-- Погружение -->
<input type="text" onChangeCapture={changeName} defaultValue={name} />