javascript - 如何使用 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 是我正在导入的功能组件。现在，普莱斯旨在接受争论。在这里，我想在imgs.id单击图像时传递价格。我该怎么做

标签： javascriptreactjsjsx

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