如何使用 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>

【讨论】:

研究了一下,发现可以像一样使用,视觉反馈更好??【参考方案6】:

使用 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-如何根据路线删除导航按钮/链接?

如何在 React(Next.js) 中分别控制每个属性?

如何更改 Material UI React 输入组件的轮廓颜色?

React js Material-UI 响应式表格

使用 React.js 和 Material-UI 简化样式化的组件媒体查询