Как обрабатывать события в map React?

Question

[Александр Иванов]

Похожие вопросы есть но без ответа.

handlePopup=(e)=>{
        alert(123)
    };
    render(){
        return(
            <div className="posts">
                {this.props.articles.map(function(article){
                    return <div key={article.pid} className="posts__block">
                        <a href="#" className="posts__block__image">
                            <img src={article.src} alt={article.pid} />
                            <button
                                onClick={this.handlePopup.bind(this)}>sd</button>
                        </a>
                    </div>;
                })}
            </div>
        )
    }

Почему onClick={this.handlePopup.bind(this)} не срабатывает и как исправить?

Answer 1

[Александр Иванов]

Тут всё просто оказалось надо просто index задать доп аргументом

handlePopup=()=>{
        alert(123)
    };

    render(){
        return(
            <div className="posts">
                {this.props.articles.map((article, index)=>{
                    if(index !== 0){
                        return <div key={article.pid} className="posts__block">
                            <a href="#" className="posts__block__image" onClick={this.handlePopup.bind(this)}>
                                <img src={article.src} alt={article.pid} />
                                {index}
                            </a>
                        </div>;
                    }
                })}
            </div>
        )
    }

Comments

[Ilya]

дело не в индексе а в том что вы во втором случае используете стрелочную функцию а она наследует контекст в котором вызывается, советую для начала подучить нативный js, а только потом браться за реакт и прочие фреймворки)

[Александр Иванов]

Ilya, ясно
Можете подсказать как при клике передать значение из state ?
Я бы удалил свой ответ и отметил ваш решением

togglePopup() {
        alert( пытаюсь получить {value.src} сюда);
        this.setState({
            showPopup: !this.state.showPopup
        });
        this.setState({
           showImage: ''
        });
    }

    render(){
        return(
            <div className="posts">
                {this.props.articles.map((value, index)=>{
                    if(index !== 0){
                        return <div key={value.pid} className="posts__block">
                            <a href="#" className="posts__block__image" onClick={this.togglePopup.bind(this)}>
                                <img src={value.src} alt={value.pid} />
                            </a>
                        </div>;
                    }
                })}

[Ilya]

togglePopup = value => {
        alert( пытаюсь получить {value} сюда);
        this.setState({
            showPopup: !this.state.showPopup
        });
        this.setState({
           showImage: ''
        });
    }

    render(){
        return(
            <div className="posts">
                {this.props.articles.map((value, index)=>{
                    if(index !== 0){
                        return <div key={value.pid} className="posts__block">
                            <a href="#" className="posts__block__image" onClick={this.togglePopup(value.src)}>
                                <img src={value.src} alt={value.pid} />
                            </a>
                        </div>;
                    }
                })}

[Александр Иванов]

Ilya, я уже разобрался с этим )