от
Мне очень трудно понять это ключевое слово и узнать, как оно работает, чтобы реагировать. Я знаю правильный ответ на мою проблему, но я не понимаю ПОЧЕМУ это работает, а другие мои решения нет.
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 (
            
                {console.log(this)}
                 onClick ={this.showTime} className="click">click me
                // WORKS BUT THIS.STATE IS UNDEFINED
                 onClick ={this.showTime()} className="click">click me
                // WORKS
                 onClick ={contact.prototype.showTime} className="click">click me
                // WORKS BUT THIS.STATE IS UNDEFINED
                 onClick ={this.showTime.bind(Contact)} className="click">click 
                    me
                // WORKS BUT THIS.STATE IS UNDEFINED
                email: {email}
                phone: {phone}
            
        );
    }
}

export default Contact;
Почему вызов функции в обработчике дает мне желаемые результаты по сравнению с просто
this.showTime
? Запись ключевого слова
this
внутри рендера возвращает объект Contact, поэтому
Contact.prototype.showTime.bind(Contact)
или
this.showTime.bind(Contact)
теоретически должны работать, но не работают. Я знаю, что ключевое слово
this
не имеет области видимости и теряет контекст при вложении. Это строго определено в контексте класса, поэтому оно не возвращает объект окна. Я просто не могу понять, что мне здесь не хватает.              

Пожалуйста, войдите или зарегистрируйтесь для публикации ответа на этот вопрос.

1 Ответ

0 голосов
от
Похоже, у вас есть несколько преждевременно закрытых тегов h4 в вашем примере, но я предполагаю, что это просто опечатки. Помимо этого вот некоторые заметки, которые могут помочь:
Добро пожаловать на сайт ByNets, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...