NextJS中如何向onClick的handleRating函数传递trains的id参数

你可以通过箭头函数包装的方式，在触发onClick时同时传递选中的评分值和trains.id，具体修改如下：

1. 修改handleRating函数，接收两个参数 #

const handleRating = (rate, trainId) => {
    console.log('选中的评分:', rate);
    console.log('对应的train ID:', trainId);
    // 这里可以加入你需要的业务逻辑
}

2. 给Rating组件的onClick绑定包装后的箭头函数 #

const trainingLine = (trains) => (
    <Rating 
        onClick={(rate) => handleRating(rate, trains.id)} 
        ratingValue={Math.round(trains.rate.reduce((partialSum, a) => partialSum + a, 0)/trains.rate.length)}
    />
)

原理说明 #

react-simple-star-rating的onClick回调默认会将用户选中的评分值作为参数返回，通过箭头函数包装后，我们可以在回调中同时传入trains.id，让handleRating同时获取到这两个数据。

内容的提问来源于stack exchange，提问作者leo.hnvl