Javascript 如何使用 React JS 在 Material UI 中使整个 Card 组件可点击？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/49007357/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to make the whole Card component clickable in Material UI using React JS?
提问by SeaWarrior404
Im using Material UI Nextin a React project. I have the Card component which has an image(Card Media) and text(Card Text) inside it. I also have a button underneath the text. My question is..how to make the whole card clickable? ie. Whether a user presses on the card text, or the card image or the button, it should trigger the onClick event which I call on the button.
我在 React 项目中使用Material UI Next。我有一个卡片组件，里面有一个图像（卡片媒体）和文本（卡片文本）。我在文本下方还有一个按钮。我的问题是..如何使整个卡片可点击？IE。无论用户按下卡片文本、卡片图像或按钮，它都应该触发我在按钮上调用的 onClick 事件。
回答by Pier Paolo Ramon
Update for v3 — 29 of August 2018
A specific CardActionAreacomponenthas been added to cover specifically this case in version 3.0.0 of Material UI.
Please use the following solution only if you are stuck with v1.
v3 更新 - 2018 年 8 月 29 日
在Material UI 的 3.0.0 版本中添加了一个特定的CardActionArea组件来专门涵盖这种情况。
仅当您坚持使用 v1 时，请使用以下解决方案。
What you probably want to achieve is a Card Action(see specification)on the top part of the card.
The Material Components for Web library has this as its first usage example for the Card Component.
Material Components for Web 库将此作为Card Component 的第一个使用示例。
You can easily reproduce that exact behaviour by composing MUI Card*components with the mighty ButtonBasecomponent. A running example can be found here on CodeSandbox: https://codesandbox.io/s/q9wnzv7684.
通过将 MUICard*组件与强大的ButtonBase组件组合在一起，您可以轻松地重现该确切行为。可以在 CodeSandbox上找到一个运行示例：https: //codesandbox.io/s/q9wnzv7684。
The relevant code is this:
相关代码是这样的：
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)
Also I strongly suggestto keep the CardActionscomponent outside of the ButtonBase.
此外，我强烈建议将该CardActions组件保留在ButtonBase.
回答by Uday
We can also use Link tag to make the whole Card component clickable and for navigation
我们还可以使用 Link 标签使整个 Card 组件可点击和导航
import { Link } from 'react-router-dom';
function myCard() {
return (
<Link to={'/give_your_path'}>
<Card>
<Card text="This is text"/>
</Card>
</Link>
);
}
回答by Roy Hyunjin Han
Here is the solution that worked for us, thanks to https://stackoverflow.com/a/50444524/192092
这是对我们有用的解决方案，感谢https://stackoverflow.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>
回答by Pandelis
You could add an onClick={clickFunction}to the containing div of the card that links to the same function as the button.
您可以onClick={clickFunction}向卡片的包含 div添加一个链接到与按钮相同的功能。
回答by Rayne
Just wrap the whole thing in the Material CardActionArea component. Everything inside of it will be clickable.
只需将整个内容包装在 Material CardActionArea 组件中。它里面的所有东西都可以点击。
<CardActionArea>
<CardMedia>
.......Image Stuff
</CardMedia>
<CardContent>
.......Content
</CardContent>
</CardActionArea>
