Я: Привет, как дела?

Интервьюер: Давайте сразу приступим. Я хочу, чтобы вы отобразили на экране два входа и одну кнопку. Когда вы нажимаете эту кнопку, в каждом вводе должно появиться случайное число. Если два числа совпадают, то я хочу видеть какое-то уведомление, может быть, конфетти на экране?

Я: Хорошо, спасибо за теплый прием… дайте-ка посмотреть… Итак, мои требования:

  1. Создайте пользовательский интерфейс с двумя входами и одной кнопкой
  2. При нажатии этой кнопки сгенерируйте два случайных числа от одного до десяти на каждом входе.
  3. Если они совпадают, то покажите конфетти

Интервьюер: Да, это так.

Я: Хорошо, я собираюсь сделать это в React, поэтому я бы начал с простого создания пользовательского интерфейса, отрисовав два ввода и кнопку и отрисовав это из основного компонента приложения:

Я: Это дает мне нужные мне элементы пользовательского интерфейса… они не стилизованы, но пока это нормально. Но так как теперь у меня есть кнопка, я заставлю ее что-то делать, когда я нажму на нее… Сейчас я просто запишу что-нибудь в console.log, просто чтобы показать, что я контролирую это.

Интервьюер: Хорошо, пока все хорошо… но что не так с этим утверждением console.log?

Я: Итак, теперь, когда у меня есть кнопка, реагирующая на мой щелчок, я просто заставлю этот щелчок заполнить два ввода некоторыми жестко заданными числами. Для этого я сделаю эти входные данные управляемыми входными данными, что означает, что значение будет управляться состоянием React. По сути, мы будем использовать состояние, чтобы сообщить вводу, каким должно быть его значение. Поэтому я создам состояние для каждого ввода с помощью хука useState и установлю начальные значения на null, а затем заставлю обработчик кликов установить числа вручную при его выполнении:

Я: Круто, теперь каждый раз, когда мы нажимаем кнопку, мы устанавливаем input1 на 6 и input2 на 9. Но поскольку они должны быть случайными, я собираюсь написать небольшую вспомогательную функцию для генерации случайного числа от 1 до 10, и мы Затем можно использовать это число для установки входных данных вместо жестко заданных значений.

Я: Мы почти закончили. Теперь я генерирую случайные числа и заполняю входные данные одним нажатием кнопки. Последнее требование здесь - проверить, равны ли два числа, и если они равны, показать некоторые забавы.

Интервьюер: На самом деле это конфетти.

Я: О да, конфетти, извините! Однако я не собираюсь создавать это — вместо этого я просто использую стороннюю библиотеку, которая предоставляет простой <Confetti/> component, который я могу условно отображать, когда два числа совпадают, например:

Интервьюер: OMG, вы приняты на работу!

Я: OMG, спасибо, я не могу дождаться, чтобы начать!