Как передать параметры из компонента в прослушиватель событий в React?

Question

В моем App.jsx у меня есть обработчик событий и возвращенный компонент:

handleSell = (price) => (event) => {
        console.log(price);

}
render() {
    return(
    <SellCatalogLine 
        key = {item.ORDERID} 
        price = {item.PRICE} 
        title = {item.TITLE} 
        handleSell = {this.handleSell}/>
    )}

Мой компонент выглядит так:

function SellCatalogLine(props){

    const currentprice = props.price
    const cheaperprice = currentprice - 100;

    return (
        <div>
        <h3>{props.title}</h3>
        <p>Lowest Price: ${currentprice}</p>
        <button type="submit" onClick = {() => props.handleSell(currentprice)}>List item at ${currentprice} </button>
        <button type="submit" onClick = {() => props.handleSell(cheaperprice)}>List item at ${cheaperprice} </button> 
        </div>
    )
};

Я пытаюсь сделать такчто консоль будет регистрировать более дешевую цену или текущую цену в зависимости от того, какую кнопку я нажимаю.Как мне это сделать?

Answer 1

Поскольку метод handleSell при вызове возвращает другую функцию, вам нужно вызвать props.handleSell(currentprice) в SellCatalogLine компоненте.

т.е.

handleSell = (price) => (event) => {
   console.log(price);
}

И использовать его как

<button type="submit" onClick = {props.handleSell(currentprice)}>List item at ${currentprice} </button>

Если метод handleSell не возвращает функцию, вы можете использовать анонимную функцию.В котором вы могли бы позвонить props.handleSell(currentprice)

т.е.

handleSell = (event, price) => {
    console.log(price);
}

и использовать его как

<button type="submit" onClick = {(e) => props.handleSell(e, currentprice)}>List item at ${currentprice} </button>