Объект события

React передаёт обработчикам объект события, как и браузер в курсе JavaScript. Если у обработчика есть параметр, он его получает:

function handleAnswer(event) {
    console.log(event.target.textContent);
}

return (
    <p>
        <button onClick={handleAnswer}>Да</button>
        <button onClick={handleAnswer}>Нет</button>
    </p>
);

Клик по кнопке «Нет» выводит Нет. event.target — это элемент, в котором произошло событие, здесь — кнопка, по которой кликнули. Поэтому один обработчик может обслуживать несколько элементов и всё же различать их.

У текстовых полей есть событие onChange. В React оно приходит после каждого изменения текста, как событие input в курсе JavaScript: после каждой набранной или стёртой буквы. (Собственное событие change в браузере ждёт, пока вы уйдёте из поля. onChange в React не ждёт.) Тогда event.target — это само поле, а event.target.value — то, что в нём написано:

<input onChange={(event) => console.log(event.target.value)} />

Этот обработчик — стрелочная функция, написанная прямо в JSX. React вызывает её с объектом события, так же как вызвал бы именованную функцию. Если набрать Сов, выведутся три строки:

С
Со
Сов

Обработчик из одной короткой строки может остаться в JSX вот так. Если он длиннее, дайте ему имя и напишите над return, как написана handleAnswer.

Пока обработчики только выводят текст в консоль. Чтобы показать набранное на странице, нужно состояние — оно в следующем уроке, а текстовым полям после него отведён отдельный урок «Формы».