如何使用 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

使箭头功能和呼叫Price用imgs.id

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>
        )
      });
    }