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

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