Reactjs 将参数传递给当前导入的类

我正在为ui使用grommet.io。现在我已经处理了ui，但我想将数据传递给函数以生成一个模态，所以我想传递一个id或其他参数

我使用heading={heading}传递了它，但是我不能用alert读取它

import React from "react";
import ReactDOM from "react-dom";

import Box from "grommet/components/Box";
import Card from "grommet/components/Card";

import Layer from 'grommet/components/Layer';

class Note extends React.Component {

  constructor(props) {
    super(props)
    this.showCardDetails = this.showCardDetails.bind(this)
  }

  showCardDetails = (e) => {
    alert( (e.target.heading)  )
  }

  render() {
    const { heading, description } = this.props
    return (
      <Box flex={true} direction='row' justify='center' align='center' wrap={true} pad='small' margin='small' colorIndex='accent-1' value={heading} onFocus=''>
        <Card heading={heading}
          description={description}
          textSize='medium' onClick={this.showCardDetails} contentPad='none' size='small' onFocus='' />
      </Box>
    )
  }
}



export default Note;

从“React”导入React；
从“react dom”导入react dom；
从“索环/组件/盒”导入盒；
从“索环/组件/卡”导入卡；
从“索环/组件/层”导入层；
类注释扩展了React.Component{
建造师（道具）{
超级（道具）
this.showCardDetails=this.showCardDetails.bind（this）
}
showCardDetails=（e）=>{
警报（（如目标标题））
}
render（）{
const{heading，description}=this.props
返回(
)
}
}
导出默认票据；

例如，假设您希望获取卡的id和值，因此需要将id和值作为参数传递给事件处理程序函数，以便在单击卡时获取这些值

或者也可以说，当您在循环中渲染卡并单击特定卡的id时，下面是获取该特定卡的值的方法

要获取id和value，您需要将value直接标识为params并访问方法中的params

import React from "react";
import ReactDOM from "react-dom";

import Box from "grommet/components/Box";
import Card from "grommet/components/Card";

import Layer from 'grommet/components/Layer';

class Note extends React.Component {

  constructor(props) {
    super(props)
    this.showCardDetails = this.showCardDetails.bind(this)
  }

  showCardDetails = (id, heading) => {
    alert(id, heading)
  }

  render() {
    const { heading, description, id} = this.props
    return (
      <Box flex={true} direction='row' justify='center' align='center' wrap={true} pad='small' margin='small' colorIndex='accent-1' value={heading} onFocus=''>
        <Card description={description}
          textSize='medium' onClick={() => this.showCardDetails(id, heading)} contentPad='none' size='small' onFocus='' />
      </Box>
    )
  }
}

从“React”导入React；
从“react dom”导入react dom；
从“索环/组件/盒”导入盒；
从“索环/组件/卡”导入卡；
从“索环/组件/层”导入层；
类注释扩展了React.Component{
建造师（道具）{
超级（道具）
this.showCardDetails=this.showCardDetails.bind（this）
}
showCardDetails=（id，标题）=>{
警报（id，标题）
}
render（）{
const{heading，description，id}=this.props
返回(
this.showCardDetails（id，heading）}contentPad='none'size='small'onFocus=''/>
)
}
}

---

这是工作解决方案

因为

showCardDetails

是

Note

方法，它的道具在那里可用，就像它们在

render

中一样：

  showCardDetails = (e) => {
    const { heading, description } = this.props;
    alert(heading);
  }

---

这正是我需要知道和实践的。非常感谢。@tarekhassan我已经更新了我的答案，请看一看