遇到事件问题.防止违约

Question

我的组件中有 2 个链接，一个用于呈现产品详细信息，另一个用于生成比较卡。

提取在 2 个不同的函数中调用，这些函数需要将项目 ID 作为参数传递。如果我将其称为普通函数，(onClickProductDetail(则抓取在渲染时多次运行。所以修改了它，以便我可以调用 event.preventDefault( OnCLickCOmpareDetails(，但随后 ROuter 根本没有渲染子组件

我尝试了 2 种不同的方法来处理 OnClick

handleClickProductDetail (product_id) {
//event.preventDefault();
console.log('product_id inside handleClickProductDetail', product_id)
this.props.fetchProductDetails(product_id);
}

handleClickCompareDetail (event,product_id) {
event.preventDefault();
console.log('product_id inside handleClickCompareDetail', product_id)
this.props.fetchCompareDetails(product_id);
}
render() {
//console.log("Prop-items",this.props.items)
if(this.props.items === undefined ){
return <center> <p>&nbsp;</p> Please enter a string value to search for items </center>
}
return (
<div>
<table>
{this.props.items.map((item, index) => (
<td>
<p> &nbsp;</p>
<p></p>
<p>  <img src={item.product_image}/></p>
<p>{item.product_title}</p>
<HashRouter>
<p><Link to={`/Compare/${item.product_id}`} component={CompareCard} onClick={(event)=>this.handleClickCompareDetail(event,item.product_id)}> Compare Prices </Link></p>
<p><Link to={`/${item.product_id}`} component={ProductDetail} onClick={this.handleClickProductDetail(item.product_id)}> Product Details </Link></p>
<Route exact path={`/Compare/${item.product_id}`} render={()=><CompareCard compare_detail={this.props.compareDetails.data.stores}/>}/>
<Route exact path={`/${item.product_id}`} render={()=><ProductDetail product_detail={this.props.productDetails.data.main_specs}/>}/>
</HashRouter>
</td>

))}
</table>
</div>
);

Answer 1

<p><Link to={`/${item.product_id}`} component={ProductDetail} onClick={this.handleClickProductDetail(item.product_id)}> Product Details </Link></p>

在上述元素的onClick事件中，您实际上已经调用了handleClickProductDetail函数，而没有将其定义为处理器。因此，它将在渲染时被调用。

将其更改为下面(类似于您在"比较价格"链接中所做的操作(，无需event.preventDefault();。

<p><Link to={`/${item.product_id}`} component={ProductDetail} onClick={(event)=>this.handleClickProductDetail(item.product_id)}> Product Details </Link></p>

---

总之，您已将onClick定义为，

onClick={this.handleClickProductDetail(item.product_id)}

但它应该是，

onClick={(event)=>this.handleClickProductDetail(item.product_id)}