我在React项目中使用Material UI Next。我有一个卡片组件,里面有一个图像(卡片媒体)和一个文本(卡片文本)。我在文本下方也有一个按钮。我的问题是..如何使整个卡片可点击?即。无论用户按下卡片文本,卡片图像还是按钮,它都应该触发我在按钮上调用的onClick事件。
v3更新-2018年8月29日 在 Material UI的3.0.0版本中* 添加了一个特定的 CardActionArea 组件来专门解决这种情况。 * 仅当您坚持使用v1时,请使用以下解决方案。
v3更新-2018年8月29日
在 Material UI的3.0.0版本中* 添加了一个特定的 CardActionArea 组件来专门解决这种情况。 *
仅当您坚持使用v1时,请使用以下解决方案。
您可能想要实现的是 卡片 顶部的 卡片动作 (请参阅规格)。
Web库的材料组件将其作为Card Component的第一个用法示例。
通过将MUI Card*组件与强大的ButtonBase组件组合在一起,可以轻松地重现该确切行为。 在CodeSandbox上 可以找到一个正在运行的示例 :https : //codesandbox.io/s/q9wnzv7684。
Card*
ButtonBase
相关代码是这样的:
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。
CardActions