React.js російською мовою. Частина шоста



Переклад офіційної документації бібліотеки React.js російською мовою.

Зміст:
1 — Частина перша
2 — Частина друга
3 — Частина третя
4 — Частина четверта
5 — Частина п'ята
6 — Частина шоста
7 — Частина сьома (скоро)

Обробка подій
Обробка подій з елементами React дуже схожа з обробкою подій з елементами DOM.
Існує кілька синтаксичних відмінностей:
Назви подій React створюються за допомогою camelCase, а не lowercase.
JSX ви передаєте функцію як обробник події, а не рядок.
Наприклад, HTML:
<button onclick="activateLasers()">
Activate Lasers
</button>


В React це виглядає трохи по-іншому:

<button onClick={activateLasers}>
Activate Lasers
</button>


Ще одна відмінність полягає в тому, що в React Ви не можете повернути false до попереднього стану за замовчуванням. Явно необхідний алгоритм preventDefault. Наприклад, з допомогою звичайного HTML, щоб запобігти за замовчуванням відкриття за посиланням нової сторінки, ви можете написати:
<a href="#" onclick="console.log('The link was clicked.'); return false">
Click me
</a>


У React це буде виглядати так:
function ActionLink() {
function handleClick(e) {
e.preventDefault();
console.log('The link was clicked.');
}

return (
<a href="#" onClick={handleClick}>
Click me
</a>
);
}


Тут e це синтетичне подія. React визначає такі синтетичні події згідно W3C spec тому вам не варто турбуватися про крос-браузерної сумісності.

Як правило, при використанні React, вам не потрібно посилати сигнал до addEventListener., щоб додати обробник подій до DOM елементу після його створення. Замість цього, просто виконайте обробник коли елемент вперше відображається.

Коли ви визначаєте компонент, використовуючи клас ES6, загальним зразком для оброблювача подій і буде алгоритмом класу. Наприклад, компонент Toggle відображає кнопку, яка дозволяє користувачам вибирати між станами «ON» і «OFF»:
class Toggle extends React.Component {
constructor(props) {
super(props);
this.state = {isToggleOn: true};

// This binding is necessary to make `this` work in the callback
this.handleClick = this.handleClick.bind(this);
}

handleClick() {
this.setState(prevState => ({
isToggleOn: !prevState.isToggleOn
}));
}

render() {
return (
<button onClick={this.handleClick}>
{this.state.isToggleOn ? 'ON' : 'OFF'}
</button>
);
}
}

ReactDOM.render(
<Toggle />,
document.getElementById('root')
);

Спробуйте повторити цей приклад CodePen.

Будьте обережні з цими значеннями у зворотних сигналах JSX. Класові алгоритми не пов'язані за замовчуванням. Якщо ви забули зв'язати їх, виконайте this.handleClick і передайте його на onClick. This стане undefined коли функція отримає сигнал.

Така дія нетипово для React, воно відноситься до роботи функцій в JavaScript. В основному, якщо ви звертаєтеся до алгоритму без () після нього, наприклад onClick={this.handleClick}, ви повинні зв'язати даний алгоритм.

Якщо ви не хочете відправляти сигнали в bind, тобто ще два можливі дії. Якщо ви використовуєте експериментальний плагін property initializer syntax, то ви можете використовувати инициализаторы реалізуються властивостей, щоб правильно пов'язати зворотні виклики:
class LoggingButton extends React.Component {
// This syntax ensures `this` is bound within handleClick.
// Warning: this is *experimental* syntax.
handleClick = () => {
console.log('this is:', this);
}

render() {
return (
<button onClick={this.handleClick}>
Click me
</button>
);
}
}


Даний синтаксис Create React App включений за замовчуванням.
Якщо ви не використовуєте инициализаторы властивостей, ви можете застосувати стрелочную функцію (arrow function) у зворотних сигналів:
class LoggingButton extends React.Component {
handleClick() {
console.log('this is:', this);
}

render() {
// This syntax ensures `this` is bound within handleClick
return (
<button onClick={(e) => this.handleClick(e)}>
Click me
</button>
);
}
}


Проблема з таким синтаксисом полягає в тому, що інший зворотний сигнал створюється кожен раз, коли виводиться LoggingButton. Найчастіше, це нормальне явище. Однак якщо зворотні сигнали передаються як властивості для нижніх компонентів, то такі компоненти можуть провести повторне демонтування. Найчастіше, ми радимо проводити зв'язування в конструкторі, щоб уникнути подібних проблем з продуктивністю.
Джерело: Хабрахабр

0 коментарів

Тільки зареєстровані та авторизовані користувачі можуть залишати коментарі.