Question

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

在2个不同的函数中调用获取，这些函数需要将项目ID作为参数传递。如果我将其称为常规函数，则（onClickProductDetail）提取将在渲染时运行多次。如此修改它，以便我可以调用event.preventDefault（OnCLickCOmpareDetails），但是ROuter根本不呈现子组件

我尝试了两种方法来处理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

void join_strings(char * joined_string_buffer, char ** src, char * separator) {

    size_t sep_len = strlen(separator);

    int idx = 0;

    while (*src) {
        size_t string_len = strlen(*src);
        for (char *p= *src++; *p; p++)
            joined_string_buffer[idx++] = *p;
        for (int i=0; i<sep_len; i++)
            joined_string_buffer[idx++] = separator[i];
    }
    joined_string_buffer[idx] = '\0';

}

在上述元素的for (int i=0; i<sep_len; i++) joined_string_buffer[idx++] = separator[i];事件中，您实际上已调用for (int i=0; i<sep_len; i++) *joined_string_buffer++ = separator[i];函数，而没有将其定义为处理程序。因此它将在渲染时调用。

将其更改为以下内容（类似于您在比较价格链接中所做的操作），无需使用<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>

发生事件.Preventdefault

1 个答案: