如何使用 React JS 在 Material UI 中使整个 Card 组件可点击?
Posted
技术标签:
【中文标题】如何使用 React JS 在 Material UI 中使整个 Card 组件可点击?【英文标题】:How to make the whole Card component clickable in Material UI using React JS? 【发布时间】:2018-08-07 00:32:09 【问题描述】:我在一个 React 项目中使用Material UI Next。我有卡片组件,里面有一个图像(卡片媒体)和文本(卡片文本)。我在文本下方也有一个按钮。我的问题是..如何使整张卡片可点击? IE。无论用户按下卡片文本、卡片图像还是按钮,它都应该触发我在按钮上调用的 onClick 事件。
【问题讨论】:
【参考方案1】:您可以将onClick=clickFunction
添加到卡片的包含 div 中,该 div 链接到与按钮相同的功能。
【讨论】:
快速简单,但可能不如其他一些解决方案漂亮。为我需要的东西工作。【参考方案2】:v3 更新 - 2018 年 8 月 29 日
在Material UI 3.0.0 版中添加了一个特定的CardActionArea component 来专门涵盖这种情况。
请仅在您使用 v1 时使用以下解决方案。
您可能想要实现的是卡片顶部的Card Action (see specification)。
Web 库的 Material Components 将其作为 first usage example for the Card Component。
您可以通过将 MUI Card*
组件与强大的 ButtonBase
组件组合来轻松重现该确切行为。 可以在here on 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
之外。
【讨论】:
这行得通,尽管我发现我通常需要将width: 100%; height: 100%
添加到 ButtonBase 和 CardContent 中。
这似乎覆盖了 CardContent 中文本元素的 CSS【参考方案3】:
我们也可以使用 Link 标签来使整个 Card 组件可点击和导航
import Link from 'react-router-dom';
function myCard()
return (
<Link to='/give_your_path'>
<Card>
<Card text="This is text"/>
</Card>
</Link>
);
【讨论】:
【参考方案4】:只需将整个东西包装在 Material CardActionArea 组件中。里面的所有东西都可以点击。
<CardActionArea>
<CardMedia>
.......Image Stuff
</CardMedia>
<CardContent>
.......Content
</CardContent>
</CardActionArea>
【讨论】:
【参考方案5】:感谢https://***.com/a/50444524/192092,这是对我们有用的解决方案
import Link as RouterLink from 'react-router-dom'
import Link from '@material-ui/core/Link'
<Link underline='none' component=RouterLink to='/your-target-path'>
<Card>
<CardActionArea>
...
</CardActionArea>
</Card>
</Link>
【讨论】:
研究了一下,发现使用 Material 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>
【讨论】:
在href旁边,还可以在CardActionArea中添加target="_blank"
很棒的答案!【参考方案7】:
只需在您的卡片中添加 onPress 道具
<Card
onPress = () => console.log('onclick')
style=styles.item
status="basic"
header=(headerProps) =>
this.renderItemHeader(headerProps, item)
>
<Text>item.description</Text>
</Card>
【讨论】:
请不要只发布代码作为答案,还要解释您的代码的作用以及它如何解决问题的问题。带有解释的答案通常更有帮助、质量更好,并且更有可能吸引投票【参考方案8】:像这样使用 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 JS 在 Material UI 中使整个 Card 组件可点击?的主要内容,如果未能解决你的问题,请参考以下文章
如何在 react-styleguidist 中包含 Material Icons
React&Material UI-如何根据路线删除导航按钮/链接?