如何使用 onClick 從 JSX 組件向反應函數組件傳遞參數

Question

這是我的大代碼中的一個非常小的片段：

import React from "react";
const Home = () => {
    return (
      imgFilter.map((imgs) => {
        return ( <
          Col sm = "3"
          xs = "12"
          key = {
            imgs.id
          }
          className = "trend-image" >
          <
          img src = {
            imgs.path
          }
          alt = {
            imgs.id
          }
          className = "img-fluid"
          onClick = {
            Price
          }
          /> <
          /Col>
        )
      });
    }

在這段代碼中，您可以在一行中看到它寫成onClick={Price} 。 這里的 Price 是我正在導入的一個函數組件。 現在，Price 旨在接受爭論。 在這里，我想在單擊圖像時將imgs.id傳遞給價格。 我該怎么做

Answer 1

制作一個箭頭函數並使用imgs.id調用Price

import React from "react";
const Home = () => {
    return (
      imgFilter.map((imgs) => {
        return ( <
          Col sm = "3"
          xs = "12"
          key = {
            imgs.id
          }
          className = "trend-image" >
          <
          img src = {
            imgs.path
          }
          alt = {
            imgs.id
          }
          className = "img-fluid"
          onClick = {() =>  Price(imgs.id)}
          /> <
          /Col>
        )
      });
    }