栏目分类:
子分类:
返回
名师互学网用户登录
快速导航关闭
当前搜索
当前分类
子分类
实用工具
热门搜索
名师互学网 > IT > 面试经验 > 面试问答

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

面试问答 更新时间: 发布时间: IT归档 最新发布 模块sitemap 名妆网 法律咨询 聚返吧 英语巴士网 伯小乐 网商动力

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

v3更新-2018年8月29日

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

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

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

(请参阅规格)

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

通过将MUI

Card*
组件与强大的
Buttonbase
组件组合在一起,可以轻松地重现该确切行为。
在CodeSandbox上
可以找到一个正在运行的示例
:https :
//presandbox.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



转载请注明:文章转载自 www.mshxw.com
本文地址:https://www.mshxw.com/it/398017.html
我们一直用心在做
关于我们 文章归档 网站地图 联系我们

版权所有 (c)2021-2022 MSHXW.COM

ICP备案号:晋ICP备2021003244-6号