Question

我正在将grommet.io用于ui。现在，我已经处理过ui，但我想将数据传递给函数以使其成为模态，因此我想传递id或其他参数。

我通过使用heading = {heading}传递了它，但是我无法通过警报读取它

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方法，因此其道具在render中可用：

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

Answer 2

例如，要获取卡的ID和值，因此需要将ID和值作为参数传递给事件处理程序函数，以便单击卡时可以获取这些值。

或者也说当您循环渲染卡片并获取特定卡片的ID时，下面是获取特定卡片价值的方法

要获取ID和值，您需要将ID值直接作为方法的参数作为参数并访问方法中的参数

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

这是有效的解决方案https://stackblitz.com/edit/grommet-pro-fgjnsb?file=Note.js

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

2 个答案: