React JS

Курс по React JS для начинающих

14 уроков 26 заданий Справочник Компилятор
/ Видеокурсы / Курс по React JS для начинающих / Урок #6 - Отслеживание событий

Урок #6 - Отслеживание событий

Урок #6 - Отслеживание событий


JavaScriptReact JS

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

Видео урок:

Недавно вышло обновление, поэтому теперь необходимо создавать класс по-новому. Вот как было раньше:
var Task = React.createClass ({
  edit: function () {
    alert ("Нажата кнопка редактировать");
  },
  remove: function () {
    alert ("Нажата кнопка удалить");
  },
  render: function () {
    return (
      <div className="box">
        <div className="text">{this.props.children}</div>
        <button onClick={this.edit} className="btn light">Редактировать</button>
        <button onClick={this.remove} className="btn red">Удалить</button>
      </div>
    );
  }
});
Теперь же надо прописывать следующим образом:
class Task extends React.Component {
  edit() {
    alert ("Нажата кнопка редактировать");
  };
  remove() {
    alert ("Нажата кнопка удалить");
  };
  render() {
    return (
      <div className="box">
        <div className="text">{this.props.children}</div>
        <button onClick={this.edit} className="btn light">Редактировать</button>
        <button onClick={this.remove} className="btn red">Удалить</button>
      </div>
    );
  }
}

Исходный код

CSS код из урока
body {
  background-color: #e1e388;
}

.field {
  display: flex;
  padding: 10px;
  width: 25%;
  margin-left: 37.5%;
  color: #fff;
  font-size: 1.3em;
  flex-direction: column;
  align-items: center;
}

.box {
  border: 2px solid #aaa719;
  background-color: #d4d37f;
  margin-bottom: 20px;
  padding: 10px;
  width: 80%;
}

.box:last-child {
  margin-bottom: 0;
}

button.btn {
  margin-right: 10px;
  padding: 10px;
  margin-top: 10px;
  cursor: pointer;
  font-size: 0.65em;
  color: #fff;
  outline: none;
}

.btn.light {
  background-color: #4eafc9;
  border: 2px solid #2a89a2;
}

.btn.red {
  background-color: #dda66d;
  border: 2px solid #b6821a;
}

.btn.light:hover {
  background-color: #2a89a2;
  border-color: #1d6f85;
}

.btn.red:hover {
  background-color: #b6821a;
  border-color: #946912;
}
Посмотреть остальной код можно после подписки на проект!

Онлайн редактор кода

Загрузка...

Задание к уроку

Необходимо оформить подписку на проект, чтобы получить доступ ко всем домашним заданиям!

Большое задание по курсу

Вам необходимо оформить подписку на сайте, чтобы получить большое задание. Такие задания есть к каждому курсу. В них входит задание, методика решения, а также "Готовое решение".
PS: подобные задания доступны при подписке от 1 месяца!


JavaScriptReact JS

Также стоит посмотреть