小编典典

如何使用React JS在Material UI中使整个Card组件可点击?

reactjs

我在React项目中使用Material UI Next。我有一个卡片组件,里面有一个图像(卡片媒体)和一个文本(卡片文本)。我在文本下方也有一个按钮。我的问题是..如何使整个卡片可点击?即。无论用户按下卡片文本,卡片图像还是按钮,它都应该触发我在按钮上调用的onClick事件。


阅读 439

收藏
2020-07-22

共1个答案

小编典典

v3更新-2018年8月29日

Material UI的3.0.0版本中* 添加了一个特定的 CardActionArea 组件来专门解决这种情况。 *

仅当您坚持使用v1时,请使用以下解决方案。

您可能想要实现的是 卡片 顶部的
卡片动作

(请参阅规格)

Web库的材料组件将其作为Card Component的第一个用法示例

通过将MUI Card*组件与强大的ButtonBase组件组合在一起,可以轻松地重现该确切行为。
在CodeSandbox上
可以找到一个正在运行的示例
https :
//codesandbox.io/s/q9wnzv7684

相关代码是这样的:

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)

我也 强烈建议CardActions组件放在ButtonBase

2020-07-22