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

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

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

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

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

import React, { useState } from 'react';

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

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

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

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

import React, { useState } from 'react';

export 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, "Атрибут")} />

Код компонента аналогичен первому примеру, единственное различие, нет привязки через bind().

class Items extends React.Component {
    constructor(props) {
        super(props);
        this.state = {name: "React"};
    }
    
    changeName(e) {
        this.setState({ name: e.target.value });
    }
}

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