在onclick()方法中通过semantic react ui card组件传递数据

Question

我正在尝试获取在 Semantic React UI 卡片组件的 onclick 方法中传递的数据，使用简单的 objective 钻取卡片组件中显示的记录的详细信息页面.

我了解到这个组件为onclick()方法创建了一个react合成事件，并将（事件，数据）传入定义的函数。

我如何才能看到实际传入的内容？我尝试在我定义的 onHandleClick() 函数中注销 JSON.stringify(data) 以查看那里有什么，但我收到 'converting circular structure to JSON' 错误。

我要做的就是将卡片上的键值传递给详细信息组件，然后我可以过滤出我的 redux 存储以获取单个记录并将其显示在详细信息组件中。

组件如下： Card.js

  newsArticles() {
    if (this.props.content.isLoading) {
      return (
        <Grid.Column stretched>
          <Message>
            <Message.Header>Not Quite There Yet</Message.Header>
            <p>To see your content, please select a channel from the dropdown list above</p>
          </Message>
        </Grid.Column>
      );
    } else {
      const cards = this.props.content.data.map( article => {
        let contentId = article.key;
        return (
          <Grid.Column stretched>
            <Card key={contentId} onClick={ ( event, data) => this.handleOnClick(event, data)} style={{ marginBottom: '2em'}}>
              <Image src={this.props.auth.data.sfInstanceUrl + article.image} />
              <Card.Content>
                <Card.Header>
                  {article.title}
                </Card.Header>
                <Card.Description>
                  {article.excerpt}
                </Card.Description>
              </Card.Content>
            </Card>
          </Grid.Column>
        );
      });
      return cards;
    }
  }

  render() {
    return(
      <Segment placeholder>
        <Grid centered stackable columns="4" textAlign="center" verticalAlign="top">
          <Grid.Row style={{ marginBottom: '2em' }}>
              {this.newsArticles()}
          </Grid.Row>
        </Grid>
      </Segment>
    )
  };

为了处理点击事件，我只是想注销通过 onclick() 方法传递的内容。最后，我只想将 contentId 变量传递给 handle 函数..

  handleOnClick( event, data ) {
    // function to navigate to single article
    console.log(`data is: ${JSON.stringify(data)}`);
  }

Answer 1

数据包含 props，其中包含其 children（组件数组）。每个 child 都是一个组件，包含一个引用自身的属性 _owner，因此出现循环引用错误。

因为我相信你对它以外的其他道具感兴趣 children 你可以这样做：

  handleOnClick( event, {children, ...data} ) {
    // function to navigate to single article
    console.log(`data is: ${JSON.stringify(data)}`);
  }

在onclick()方法中通过semantic react ui card组件传递数据

Pass data through semantic react ui card component in the onclick() method

reactjs

semantic-ui-react