Я пытаюсь понять поведение этого ключевого слова в реагирующем компоненте (функция Arrow против обычной функции) в паре с обработчиком событий.
Для этого я создал два примера, один с HTML / vanilla JS, другой с React.
HTML / Vanilla JS
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<button class="btn-arr">Log this Arr</button>
<button class="btn-reg">Log this Reg</button>
<script>
class App {
logThisArr = () => {
console.log('Arr : ', this);
};
logThisReg = function () {
console.log('Reg : ', this);
};
}
const app = new App();
const btnArr = document.querySelector('.btn-arr');
const btnReg = document.querySelector('.btn-reg');
btnArr.addEventListener('click', app.logThisArr); // Arr : App {logThisArr: ƒ, logThisReg: ƒ}
btnReg.addEventListener('click', app.logThisReg); // Reg : <button class="btn-reg">Log this Reg</button>
</script>
</body>
</html>
React
import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import registerServiceWorker from './registerServiceWorker';
class App extends Component {
logThisArr = () => {
console.log('arrow : ', this);
};
logThisReg = function() {
console.log('Reg : ', this);
};
render() {
return (
<div className="App">
<button onClick={this.logThisArr}>Log this Arr</button>
{/* Arr : App {props: {…}, context: {…}, refs: {…}, updater: {…}, logThisArr: ƒ, …}*/}
<button onClick={this.logThisReg}>Log this Reg</button>
{/*Reg : undefined */}
</div>
);
}
}
ReactDOM.render(<App />, document.getElementById('root'));
registerServiceWorker();
Почему я не получаю такой же вывод при использовании обычной функции? В ответ я получаю "undefined", а в ванили JS я получаю объект кнопки.
Спасибо!