Как правильно создать Closure или IIFE для обработки события onclick в ReactJS?

Question

Я пытаюсь использовать объект this в обработчике событий, но продолжаю получать неопределенную ошибку относительно этого объекта.

Я также использую ReactJS и Redux

class Chat extends Component {

    constructor(props){
        super(props);
        this.setUpChats   = this.setUpChats.bind(this);
        this.setChattingTo= this.setChattingTo.bind(this);
    }

    setChattingTo(){

        return function(){
            //breaks here can't access the this object
            this.props.chattingToUser(user);
        } 
    }

    setUpChats(){
        //map inside a map to g 
        var chats = _.map(chatCollection, function(key, value){

            return (<ul> _.map(key, function(i){
                return (
                    <li 
                        onClick={this.setChattingTo(user[i])}
                    >
                     user[i].username
                    </li>       
            }.bind(this))</ul>)

        }.bind(this));    
    }

}

Итак, мой вопрос: как получить доступ к объекту this в функции setChattingTo, чтобы он работал правильно при нажатии?

Заранее большое спасибо

Answer 1

Вам не нужен .bind() в самом обработчике событий.Вам необходимо использовать синтаксис жирной стрелки _.map(chatCollection, (key, value) => {}, чтобы неявно связывать this.Или вы можете сделать const that = this; над вашей картой.

Если вы используете более позднюю стадию babel, вы также можете избавиться от привязки конструктора this и просто выполнить неявное связывание в функции.определение.

setUpChats = () => {}