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