时间戳

首页 > 解决方案 > 如何在链接中添加 onClick 事件

reactjs - 如何在链接中添加 onClick 事件

问题描述

我Link在 ReactJs 中有以下代码，试图添加onClick没有被触发的事件。

功能性无状态组件

export default function ResultChip({chipName, downloadTestResults}) {

return (
<Card className={classes.card}>
  <CardContent>   
    {
     chipName == "Download results" &&
     <Typography style ={{marginTop: 15, fontWeight: 3}}>
     <Link style={{ fontWeight: 2, color: '#087063', letterSpacing: '0.28' }} onClick={downloadTestResults}> {botTestAPIResult.uploadedFilename} </Link>
     </Typography>
    }
  </CardContent>
</Card>
);
}

这是我的 ContainerComponent

import React, { Component } from 'react';

class ResultChip extends Component {
constructor(props) {
    super(props);
    this.state= {
    }  
    this.downloadTestResults = this.downloadTestResults.bind(this);   
 }

 downloadTestResults = (e) => {
    e.preventDefault();
    //Perform some action here    
 }

  render() {   
    return (
        <div>
        </div>
    )
   }
   }

为什么我的点击事件没有被触发？组件和容器之间是否缺少某些连接？怎么了？

标签： reactjshyperlink

解决方案

你像这样导出ResultChip：

export default function ResultChip({chipName, downloadTestResults}) {

return (
   <Card className={classes.card}>
      <CardContent>   
      {
        chipName == "Download results" &&
        <Typography style ={{marginTop: 15, fontWeight: 3}}>
        <Link onClick={downloadTestResults}> {botTestAPIResult.uploadedFilename}</Link>
        </Typography>
      }
      </CardContent>
   </Card>
);
}

致电ResultChip您的ContainerComponent：

import ResultChip from '...';

downloadTestResults = (e) => {
    e.preventDefault();
    //Perform some action here    
}
render() {
   return (
      <div>
         <ResultChip 
           downloadTestResults={this.downloadTestResults} 
           chipName={...}
         />
      </div>
   )
}

推荐阅读