Как правильно привязать this плюс дополнительные параметри к обработчику клика в React?

Question

[Дмитрий]

Здравствуйте, есть компонент

ProductSingle.js

import React, {Component} from 'react';
import {Link} from 'react-router-dom';
import ProductPrices from './ProductPrices';
import ReactHtmlParser from 'react-html-parser';
import history from '../../helpers/history';

class ProductSingle extends Component {

    constructor(props){
        super(props);

        this.postSelectedHandler = this.postSelectedHandler.bind(this, id);
    }

    postSelectedHandler(id, e){
        e.preventDefault();
        
        console.log( 'id', id );
        console.log( 'e', e );
    }

    render(){

        const {image, title, excerpt, descrtitle, descrtext, regular_price, sale_price, discount, currency, id, matchPath} = this.props;

        return (
            <div className="good__item">
                <div className="good__itemInner">
                    <div className="good__itemContent">
                        <div className="good__itemHeader">
                            <img className="good__itemImage" src={image} data-id={id} alt=""/>
                        </div>

                        <div className="good__itemTitle">{ReactHtmlParser(title)}</div>

                        <div className="good__itemExcerpt">{ReactHtmlParser(excerpt)}</div>

                        <div className="good__itemDescr">
                            <a
                                href={`${matchPath}/${id}`}
                                className="good__itemDescrTitle"
                                onClick={this.postSelectedHandler}
                            >
                                {ReactHtmlParser(descrtitle)}
                            </a>
                        </div>

                        <ProductPrices regular_price={regular_price} sale_price={sale_price} currency={currency} />
                    </div>
                </div>
            </div>
        );
    }
}

export default ProductSingle;

В нем есть ссылка

<a
    href={`${matchPath}/${id}`}
    className="good__itemDescrTitle"
    onClick={this.postSelectedHandler}
>

Обработчик

postSelectedHandler(id, e){
        e.preventDefault();
        
        console.log( 'id', id );
        console.log( 'e', e );
    }

Привязываю this в конструкторе руководствуясь guideline

почему id undefined? Как правильно привязать через конструктор дополнительный параметр?

Спасибо.

Answer 1

[Антон Спирин]

почему id undefined?

А вы туда undefined и передаете.

Исправленный вариант:

constructor(props){
  super(props);

  this.postSelectedHandler = this.postSelectedHandler.bind(this, this.props.id);
}

Comments

[Дмитрий]

Благодарю