Мне очень тяжело понять это ключевое слово и то, как оно работает в отношении реакции.Я знаю правильный ответ на мою проблему, но я не понимаю ПОЧЕМУ это работает, а другие мои решения нет.this.showTime.bind(this) сообщает методу showTime использовать объект Contact, как в методе showTime.(если это не часть моего недоразумения).
Вот мой код с несколькими примерами различий.
import React from 'react';
import Users from './Users.js';
class Contact extends React.Component {
constructor() {
super();
this.state = {};
this.showTime = this.showTime.bind(this); // correct solution
}
showTime() {
console.log(this.state);
console.log('tom');
};
render(){
const { name, email, phone } = this.props;
return (
<div>
{console.log(this)}
<h4> onClick ={this.showTime} className="click">click me</h4>
// WORKS BUT THIS.STATE IS UNDEFINED
<h4> onClick ={this.showTime()} className="click">click me</h4>
// WORKS
<h4> onClick ={contact.prototype.showTime} className="click">click me</h4>
// WORKS BUT THIS.STATE IS UNDEFINED
<h4> onClick ={this.showTime.bind(Contact)} className="click">click
me</h4>
// WORKS BUT THIS.STATE IS UNDEFINED
<h4>email: {email}</h4>
<h4>phone: {phone}</h4>
</div>
);
}
}
export default Contact;
Почему вызов функции в обработчике дает мне желаемые результаты по сравнению с this.showTime?Ключевое слово
Logging this внутри рендера возвращает объект Contact, поэтому теоретически Contact.prototype.showTime.bind(Contact) или this.showTime.bind(Contact) должно работать, но это не так.
Я знаю, что ключевое слово thisне имеет области видимости и теряет контекст при вложении.Это строго определено в контексте класса, поэтому оно не возвращает объект окна.Я просто не могу понять, что мне здесь не хватает.