Javascript 如何使用React JS使整个卡片组件在物料界面中可点击？

我在一个项目中使用。我有一个卡片组件，里面有图像（卡片介质）和文本（卡片文本）。我在文本下面还有一个按钮。我的问题是..如何使整个卡片可点击？也就是说，无论用户按下卡片文本、卡片图像或按钮，都会触发我在按钮上调用的onClick事件。

您可以向卡片的包含div添加一个

onClick={clickFunction}

，该div链接到与按钮相同的函数

2018年8月第3-29版更新

在Material UI的版本3.0.0中，添加了一个具体的说明，专门涵盖这种情况

仅当您使用v1时，请使用以下解决方案

你可能想要实现的是卡片顶部的一个标记

Web库的材质组件将此作为其属性

通过使用强大的

按钮库

组件组合MUI

Card*

组件，您可以轻松地重现这种精确行为可以找到一个运行示例：

相关代码如下：

import Card from '@material-ui/core/Card';
import CardActions from '@material-ui/core/CardActions';
import CardContent from '@material-ui/core/CardContent';
import CardMedia from '@material-ui/core/CardMedia';
import Typography from '@material-ui/core/Typography';
import ButtonBase from '@material-ui/core/ButtonBase';

const styles = {
  cardAction: {
    display: 'block',
    textAlign: 'initial'
  }
}

function MyCard(props) {
  return (
    <Card>
      <ButtonBase
          className={props.classes.cardAction}
          onClick={event => { ... }}
      >
        <CardMedia ... />
        <CardContent>...</CardContent>
      </ButtonBase>
    </Card>
  );
}

export default withStyles(styles)(MyCard)

从'@material ui/core/Card'导入卡片；
从“@material ui/core/CardActions”导入CardActions；
从“@material ui/core/CardContent”导入CardContent；
从“@material ui/core/CardMedia”导入CardMedia；
从“@material ui/core/Typography”导入排版；
从“@material ui/core/ButtonBase”导入按钮库；
常量样式={
行动：{
显示：“块”，
textAlign:'首字母'
}
}
功能MyCard（道具）{
返回(
{ ... }}
>
...
);
}
导出默认样式（样式）（MyCard）

---

另外，我强烈建议将

卡片操作

组件保留在

按钮库

之外

我们还可以使用链接标签使整个卡片组件可点击并用于导航

import { Link } from 'react-router-dom';
function myCard() {
  return (
    <Link to={'/give_your_path'}>
     <Card>
      <Card text="This is text"/>
     </Card>
    </Link>
  );
}

从'react router dom'导入{Link}；
函数myCard（）{
返回(
);
}

只需将整个内容包装在Material CardActionArea组件中即可。里面的一切都可以点击

<CardActionArea>
   <CardMedia>
   .......Image Stuff
   </CardMedia>
   <CardContent>
   .......Content
   </CardContent>
</CardActionArea>

……图像素材
……内容

这是我们的解决方案，多亏了

从'react router dom'导入{Link as RouterLink}
从“@material ui/core/Link”导入链接
...

对于材质UI 4.9.10，这是可行的

<Card>
    <CardActionArea href="https://google.com">
        <CardContent>
            <Typography>Click me!</Typography>
        </CardContent>
    </CardActionArea>
</Card>

点击我！

如果您使用的是react路由器，这也可以使用

<Card>
    <CardActionArea component={RouterLink} to="/questions">
        <CardContent>
            <Typography>Click me!</Typography>
        </CardContent>
    </CardActionArea>
</Card>

点击我！

只需在您的卡中添加压力道具即可

 <Card
                          onPress = {() => {console.log('onclick')}}
                          style={styles.item}
                          status="basic"
                          header={(headerProps) =>
                            this.renderItemHeader(headerProps, item)
                          }>
                          <Text>{item.description}</Text>
                        </Card>

{console.log（'onclick'）}
style={style.item}
status=“基本”
header={（headerProps）=>
此.renderItemHeader（headerProps，项目）
}>
{item.description}

只需像这样使用onClick事件

import React from 'react';
import { makeStyles } from '@material-ui/core/styles';
import Card from '@material-ui/core/Card';
import CardActions from '@material-ui/core/CardActions';
import CardContent from '@material-ui/core/CardContent';
import Button from '@material-ui/core/Button';

const useStyles = makeStyles((theme) => ({
  root: {
    flexGrow: 1,
  },
  card: {
    cursor: "pointer",
    padding: theme.spacing(2),
    textAlign: 'center',
    color: theme.palette.text.secondary,
  },
}));

function App() {
  const classes = useStyles();

  const clickMe = (event) => {
    console.log(event);
  }

  return (
      <div className={classes.root}>
        <Card className={classes.card} onClick={(event) => 
          {clickMe(event)}}>          
          <CardContent>
            <h4>test</h4>
          </CardContent>
          <CardActions>
            <Button size="small">Learn More</Button>
          </CardActions>
        </Card>
      </div>
  );
}

export default App;

从“React”导入React；
从'@material ui/core/styles'导入{makeStyles}；
从“@material ui/core/Card”导入卡片；
从“@material ui/core/CardActions”导入CardActions；
从“@material ui/core/CardContent”导入CardContent；
从“@material ui/core/Button”导入按钮；
const useStyles=makeStyles（（主题）=>({
根目录：{
flexGrow:1，
},
卡片：{
光标：“指针”，
填充：主题。间距（2），
textAlign:'中心'，
颜色：theme.palete.text.secondary，
},
}));
函数App（）{
const classes=useStyles（）；
常量clickMe=（事件）=>{
console.log（事件）；
}
返回(
{点击我（事件）}}>
测试
了解更多
);
}
导出默认应用程序；

这很有效，尽管我发现我通常需要添加

宽度：100%；高度：100%

同时添加到按钮库和CardContent。这似乎覆盖了CardContents中文本元素的CSS。在href旁边，您还可以将

target=“\u blank”

添加到CardActionArea！在做了一些研究之后，我发现，可以像那样使用，并且有更好的视觉反馈。请不要只发布代码作为答案，还要解释代码的作用以及它如何解决问题。带有解释的答案通常更有用，质量更好，更容易吸引upvotesthanks@Ran MarcianoQuick和easy，但可能不如其他一些解决方案那么漂亮。为我需要的工作。

import React from 'react';
import { makeStyles } from '@material-ui/core/styles';
import Card from '@material-ui/core/Card';
import CardActions from '@material-ui/core/CardActions';
import CardContent from '@material-ui/core/CardContent';
import Button from '@material-ui/core/Button';

const useStyles = makeStyles((theme) => ({
  root: {
    flexGrow: 1,
  },
  card: {
    cursor: "pointer",
    padding: theme.spacing(2),
    textAlign: 'center',
    color: theme.palette.text.secondary,
  },
}));

function App() {
  const classes = useStyles();

  const clickMe = (event) => {
    console.log(event);
  }

  return (
      <div className={classes.root}>
        <Card className={classes.card} onClick={(event) => 
          {clickMe(event)}}>          
          <CardContent>
            <h4>test</h4>
          </CardContent>
          <CardActions>
            <Button size="small">Learn More</Button>
          </CardActions>
        </Card>
      </div>
  );
}

export default App;