当在 reactjs 中的 return 标记内通过引用调用时，如何将参数传递给 onClick 函数？

Question

我想传递参数'product'，这是我从里面的map函数得到的 onclick 的图像标记上面声明的函数 {handleProductQuickView}。

我想把slug传给里面的setModalData onclick 函数，它将提供 slug 对象的产品详细信息。

我尝试将其作为参数传递给 onclick 函数在 Image 标签内，但这没有用。

         export default function HomePageStructure({title, swiperNext, swiperPrev}) {

               **function handleProductQuickView( product ) {
               setModalData(product.slug)
               setModalView("PRODUCT_DETAILS");
               return openModal();**

          return (
             <>
                   {data?.pages?.map((products, _idx) => (
                       <Fragment key={_idx}> 
                           {products?.data?.map((product) => (
                               
                                <motion.div key={product.id}>

                                    <SwiperSlide className='grid grid-cols-3 md:grid- 
                                                            cols-4 lg:flex 
                                                lg:justify-center lg: items-start' 
                                                key={product.id} >

                                        <div className='border-1  border-gray-500'>
                                   <Image
                                      className='max-w-100 h-100 '
                                    **onClick = {handleProductQuickView(product)}**
                                      role="button"
                                     src={product.image?.original ?? 
                                          siteSettings?.product?.placeholderImage}
                                     height={200}
                                     width={200}
                                                
                                     objectFit="contain"
                                     className="product-image"
                                            />
                                            <span className='text-sm items-center 
                   justify-center flex '>
                                                {product.name}
                                            </span>
                                        </div>
                                
                                    </SwiperSlide>

                                </motion.div>
                            ))}
                        </Fragment>
                ))}
               
                </Swiper>
            </>
         </div>

Answer 1

简单，这样做

 onClick={() => handleProductQuickView(product)}

现在你的 'product' 对象可以访问里面的 slug 属性 setModalData(product.slug)

当在 reactjs 中的 return 标记内通过引用调用时，如何将参数传递给 onClick 函数？

How can I pass the argument up to the onClick function when it is called by reference inside return tag in reactjs?

events

arguments

function

onclick

reactjs