События и условный рендеринг

Реагируй на действия пользователя и показывай или скрывай элементы в зависимости от условий.

8 мин · 3 вопросов

Событие - это действие пользователя: клик, нажатие клавиши, отправка формы... В React ты слушаешь событие, передавая функцию в специальный prop: onClick для кликов, onChange для ввода и так далее. Обрати внимание на написание в camelCase: onClick с заглавной C, а не onclick, как в HTML.

function AlertButton() {
  function handleClick() {
    alert("Button clicked!");
  }

  return (
    <button onClick={handleClick}>
      Click here
    </button>
  );
}

Второй инструмент этого урока - условный рендеринг, то есть показ разного содержимого в зависимости от условия. Как вывеска магазина с надписью «Открыто» или «Закрыто», компонент может выбирать, что показать. Самый частый инструмент - тернарный оператор: condition ? valueIfTrue : valueIfFalse, компактная запись «если... иначе...».

function Status({ isLoggedIn }) {
  return (
    <p>
      {isLoggedIn ? "Welcome!" : "Please sign in."}
    </p>
  );
}

А как показать что-то или вообще ничего? Для этого используется оператор &&: в записи condition && element элемент показывается, только если условие истинно. Если оно ложно, React просто ничего не отрисовывает, без ошибки.

function Cart({ itemCount }) {
  return (
    <div>
      <h3>My cart</h3>
      {itemCount > 0 && <p>{itemCount} item(s)</p>}
    </div>
  );
}

Проверка знаний

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

1. Какой prop используется, чтобы реагировать на клик в React?
   • onclick
   • onClick
   • clickEvent
2. Почему onClick={handleClick} пишется без скобок?
   • Потому что скобки запрещены в JSX
   • Чтобы страница загружалась быстрее
   • Чтобы функция выполнялась по клику, а не при отрисовке
3. Что покажет {isVisible && <p>Info</p>}, если isVisible равно false?
   • Вообще ничего
   • Абзац Info всё равно покажется
   • React выведет сообщение об ошибке