Я: Привет, как дела?
Интервьюер: Давайте сразу приступим. Я хочу, чтобы вы отобразили на экране два входа и одну кнопку. Когда вы нажимаете эту кнопку, в каждом вводе должно появиться случайное число. Если два числа совпадают, то я хочу видеть какое-то уведомление, может быть, конфетти на экране?
Я: Хорошо, спасибо за теплый прием… дайте-ка посмотреть… Итак, мои требования:
- Создайте пользовательский интерфейс с двумя входами и одной кнопкой
- При нажатии этой кнопки сгенерируйте два случайных числа от одного до десяти на каждом входе.
- Если они совпадают, то покажите конфетти
Интервьюер: Да, это так.
Я: Хорошо, я собираюсь сделать это в React, поэтому я бы начал с простого создания пользовательского интерфейса, отрисовав два ввода и кнопку и отрисовав это из основного компонента приложения:
Я: Это дает мне нужные мне элементы пользовательского интерфейса… они не стилизованы, но пока это нормально. Но так как теперь у меня есть кнопка, я заставлю ее что-то делать, когда я нажму на нее… Сейчас я просто запишу что-нибудь в console.log, просто чтобы показать, что я контролирую это.
Интервьюер: Хорошо, пока все хорошо… но что не так с этим утверждением console.log
?
Я: Итак, теперь, когда у меня есть кнопка, реагирующая на мой щелчок, я просто заставлю этот щелчок заполнить два ввода некоторыми жестко заданными числами. Для этого я сделаю эти входные данные управляемыми входными данными, что означает, что значение будет управляться состоянием React. По сути, мы будем использовать состояние, чтобы сообщить вводу, каким должно быть его значение. Поэтому я создам состояние для каждого ввода с помощью хука useState и установлю начальные значения на null
, а затем заставлю обработчик кликов установить числа вручную при его выполнении:
Я: Круто, теперь каждый раз, когда мы нажимаем кнопку, мы устанавливаем input1
на 6 и input2
на 9. Но поскольку они должны быть случайными, я собираюсь написать небольшую вспомогательную функцию для генерации случайного числа от 1 до 10, и мы Затем можно использовать это число для установки входных данных вместо жестко заданных значений.
Я: Мы почти закончили. Теперь я генерирую случайные числа и заполняю входные данные одним нажатием кнопки. Последнее требование здесь - проверить, равны ли два числа, и если они равны, показать некоторые забавы.
Интервьюер: На самом деле это конфетти.
Я: О да, конфетти, извините! Однако я не собираюсь создавать это — вместо этого я просто использую стороннюю библиотеку, которая предоставляет простой <Confetti/>
component, который я могу условно отображать, когда два числа совпадают, например:
Интервьюер: OMG, вы приняты на работу!
Я: OMG, спасибо, я не могу дождаться, чтобы начать!