Учебный курс по React, часть 16: четвёртый этап работы над TODO-приложением, обработка событий

Автор оригинала: Bob Ziroll
  • Перевод
  • Tutorial
В сегодняшней части перевода учебного курса по React мы продолжим работу над Todo-приложением и поговорим о том, как в React обрабатывают события.

image

Часть 1: обзор курса, причины популярности React, ReactDOM и JSX
Часть 2: функциональные компоненты
Часть 3: файлы компонентов, структура проектов
Часть 4: родительские и дочерние компоненты
Часть 5: начало работы над TODO-приложением, основы стилизации
Часть 6: о некоторых особенностях курса, JSX и JavaScript
Часть 7: встроенные стили
Часть 8: продолжение работы над TODO-приложением, знакомство со свойствами компонентов
Часть 9: свойства компонентов
Часть 10: практикум по работе со свойствами компонентов и стилизации
Часть 11: динамическое формирование разметки и метод массивов map
Часть 12: практикум, третий этап работы над TODO-приложением
Часть 13: компоненты, основанные на классах
Часть 14: практикум по компонентам, основанным на классах, состояние компонентов
Часть 15: практикумы по работе с состоянием компонентов
Часть 16: четвёртый этап работы над TODO-приложением, обработка событий
Часть 17: пятый этап работы над TODO-приложением, модификация состояния компонентов
Часть 18: шестой этап работы над TODO-приложением
Часть 19: методы жизненного цикла компонентов
Часть 20: первое занятие по условному рендерингу
Часть 21: второе занятие и практикум по условному рендерингу
Часть 22: седьмой этап работы над TODO-приложением, загрузка данных из внешних источников
Часть 23: первое занятие по работе с формами
Часть 24: второе занятие по работе с формами

Занятие 29. Практикум. TODO-приложение. Этап №4


Оригинал

▍Задание


В прошлый раз мы загружали список дел для приложения из JSON-файла, а потом, проходясь по полученному массиву, формировали, с помощью метода map(), набор компонентов. Нам хотелось бы модифицировать эти данные. А это мы сможем сделать только в том случае, если предварительно загрузим их в состояние компонента.

Сегодняшнее задание заключается в том, чтобы вы преобразовали компонент App в компонент с состоянием и загрузили бы импортированные данные о делах в состояние этого компонента.

▍Решение


Вспомним уже имеющийся в нашем проекте код компонента App:

import React from "react"
import TodoItem from "./TodoItem"
import todosData from "./todosData"

function App() {
    const todoItems = todosData.map(item => <TodoItem key={item.id} item={item}/>)
    
    return (
        <div className="todo-list">
            {todoItems}
        </div>
    )
}

export default App

Для того чтобы получить возможность модифицировать данные из списка дел нам нужно чтобы то, что сейчас хранится в todosData, было бы помещено в состояние компонента App.

Решая эту задачу, мы сначала должны преобразовать функциональный компонент App в компонент, основанный на классе. Потом нам нужно загрузить данные из todosData в состояние и, формируя список компонентов TodoItem, обходить уже не массив todosData, а массив с такими же данными, хранящийся в состоянии. Вот как это будет выглядеть:

import React from "react"
import TodoItem from "./TodoItem"
import todosData from "./todosData"

class App extends React.Component {
    constructor() {
        super()
        this.state = {
            todos: todosData
        }
    }
    
    render() {
        const todoItems = this.state.todos.map(item => <TodoItem key={item.id} item={item}/>)
        
        return (
            <div className="todo-list">
                {todoItems}
            </div>
        )    
    }
}

export default App

Надо отметить, что после всех этих преобразований внешний вид приложения не изменился, но выполнив их, мы подготовили его к дальнейшей работе над ним.

Занятие 30. Обработка событий в React


Оригинал

Обработка событий — это то, что является движущей силой веб-приложений, и то, что отличает их от простых статических веб-сайтов. Обработка событий в React устроена довольно просто, она очень похожа на то, как события обрабатываются в обычном HTML. Так, например, в React имеются обработчики событий onClick и onSubmit, которые сходны с аналогичными механизмами HTML, представленными в виде onclick и onsubmit, не только в плане имён (в React, правда, их имена формируются с использованием верблюжьего стиля), но и в том, как именно с ними работают.

Здесь мы будем рассматривать примеры, экспериментируя со стандартным приложением, создаваемым средствами create-react-app, файл компонента App которого содержит следующий код:

import React from "react"

function App() {
    return (
        <div>
            <img src="https://www.fillmurray.com/200/100"/>
            <br />
            <br />
            <button>Click me</button>
        </div>
    )
}

export default App

Вот как выглядит наше приложение в браузере.


Страница приложения в браузере

Прежде чем мы сможем серьёзно говорить о модификации состояния компонентов с помощью метода setState(), нам нужно разобраться с событиями и с обработкой событий в React. Механизмы обработки событий позволяют пользователю приложения взаимодействовать с ним. Приложение же может реагировать, например, на события click или hover, выполняя при возникновении этих событий некие действия.

Обработка событий в React, на самом деле, устроена довольно просто. Если вам знакомы стандартные механизмы HTML, используемые для назначения элементам управления обработчиков событий, наподобие обработчика события onclick, то вы сразу же увидите сходство с этими механизмами того, что предлагает нам React.

Например, для того, чтобы средствами HTML сделать так, чтобы по нажатию на некую кнопку выполнялась бы какая-то функция, можно воспользоваться такой конструкцией (при условии существования и доступности этой функции):

<button onclick="myFunction()">Click me</button>

В React, как уже было сказано, обработчики событий имеют имена, составленные по правилам верблюжьего стиля, то есть onclick превратится здесь в onClick. То же самое справедливо и для обработчика события onMouseOver, и для других обработчиков. Причина подобного изменения заключается в том, что здесь используется подход к именованию сущностей, обычный для JavaScript.

Поработаем теперь с нашим кодом и сделаем так, чтобы кнопка реагировала бы на щелчки по ней. Вместо того чтобы передавать обработчику код для вызова функции в виде строки, мы передаём имя функции в фигурных скобках. Заготовка соответствующего фрагмента нашего кода будет теперь выглядеть так:

<button onClick={}>Click me</button>

Если вы взглянете на код компонента App, который мы используем в этом примере, вы заметите, что там пока не объявлена функция, которую планируется вызывать при нажатии на кнопку. В общем-то, прямо сейчас мы вполне можем обойтись анонимной функцией, объявленной прямо в коде, описывающем кнопку. Вот как это будет выглядеть:

<button onClick={() => console.log("I was clicked!")}>Click me</button> 

Теперь при нажатии на кнопку в консоль попадёт текст I was clicked!.

Того же эффекта можно добиться, объявив самостоятельную функцию и приведя код файла компонента к следующему виду:

import React from "react"

function handleClick() {
    console.log("I was clicked")
}

function App() {
    return (
        <div>
            <img src="https://www.fillmurray.com/200/100"/>
            <br />
            <br />
            <button onClick={handleClick}>Click me</button>
        </div>
    )
}

export default App

Для того чтобы ознакомиться с полным списком событий, поддерживаемых React, загляните на эту страницу документации.

Теперь попытайтесь оснастить наше приложение новой возможностью. А именно — сделайте так, чтобы при наведении мыши на изображение в консоль выводилось бы какое-нибудь сообщение. Для этого вам нужно найти подходящее событие в документации и организовать его обработку.

На самом деле, решить эту задачу можно разными способами, мы продемонстрируем её решение, основанное на событии onMouseOver. При возникновении этого события мы будем выводить в консоль сообщение. Вот как будет теперь выглядеть наш код:

import React from "react"

function handleClick() {
    console.log("I was clicked")
}

function App() {
    return (
        <div>
            <img onMouseOver={() => console.log("Hovered!")} src="https://www.fillmurray.com/200/100"/>
            <br />
            <br />
            <button onClick={handleClick}>Click me</button>
        </div>
    )
}

export default App

Обработка событий даёт в руки программиста огромные возможности, которые, конечно же, не ограничиваются выводом сообщений в консоль. В дальнейшем мы поговорим о том, как обработка событий, совмещённая с возможностями по изменению состояния компонентов, позволит нашим приложениям решать возлагаемые на них задачи.

Как обычно — рекомендуем уделить некоторое время на то, чтобы поэкспериментировать с тем, что вы сегодня узнали.

Итоги


Сегодня вы выполнили небольшую практическую работу, которая заложила фундамент серьёзных изменений Todo-приложения, и ознакомились с механизмами обработки событий в React. В следующий раз вам будет предложен ещё один практикум и будет представлена новая тема.

Уважаемые читатели! Если вы, ознакомившись с методикой обработки событий в React, поэкспериментировали с тем, что узнали, просим об этом рассказать.

  • +26
  • 4,1k
  • 6
RUVDS.com
906,00
RUVDS – хостинг VDS/VPS серверов
Поделиться публикацией

Комментарии 6

    –2
    Классы это больше не модно — курс, в целом, уже устарел. Любое новое приложение на реакте лучше начинать делать с хуками, знать о классах стоит только что бы понимать уже написанный с ними код.
      +1
      Классы дают полный доступ ко всему: состоянию, методам жизненного цикла. Они совершенно прозрачно и ожидаемо работают. Описывать код компонента классом с методами-обработчиками — вполне нормальная практика. Код легко читать.

      Эти ваши хуки — магия, добавленная для любителей функциональщины.
      0
      Прошу прощение за глупый вопрос, но React и React OS имеют хоть что-то общее? Или просто названия совпали?
        0
        Ничего общего.
        +1
        Не к переводу, а вообще про курс: какой-то он слишком простой. Объяснять, как навешивать событие на компонент целую главу как-то странно.
        И чем не подходит официальная документация?
          0
          Мне наоборот кажется, что сделать нечто очень понятное и простое не всем удается. Некоторым людям надо чтобы всё было подробнейшим образом объяснено и замечательно, когда такие материалы есть, потому что непонятных курсов, где чёрт что разберешь — полно.

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

        Самое читаемое