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

Question

我正在使用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;

Answer 1

由于 showCardDetails 是 Note 方法，因此它的 props 在那里可用，就像它们在 render 中一样:

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