如何使用 React JS 在 Material UI 中使整個 Card 組件可點擊？

Question

我在 React 項目中使用Material UI Next 。 我有卡片組件，里面有一個圖像（卡片媒體）和文本（卡片文本）。 我在文本下方也有一個按鈕。 我的問題是..如何使整張卡片可點擊？ IE。 無論用戶按下卡片文本、卡片圖像還是按鈕，它都應該觸發我在按鈕上調用的 onClick 事件。

Answer 1

v3 更新 — 2018 年 8 月 29 日

在Material UI 的 3.0.0 版本中添加了一個特定的CardActionArea組件來專門覆蓋這種情況。

請僅在您使用 v1 時才使用以下解決方案。

您可能想要實現的是卡片頂部的卡片操作（參見規范） 。

Material Components for 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之外。

Answer 2

使用 Material UI 4.9.10，這可以工作。

<Card>
    <CardActionArea href="https://google.com">
        <CardContent>
            <Typography>Click me!</Typography>
        </CardContent>
    </CardActionArea>
</Card>

如果您使用的是反應路由器，這也可以。

<Card>
    <CardActionArea component={RouterLink} to="/questions">
        <CardContent>
            <Typography>Click me!</Typography>
        </CardContent>
    </CardActionArea>
</Card>

Answer 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>
  );
}

Answer 4

您可以將onClick={clickFunction}添加到卡片的包含 div，該卡片鏈接到與按鈕相同的功能。

Answer 5

這是對我們有用的解決方案，感謝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>

Answer 6

只需將整個內容包裝在 Material CardActionArea 組件中即可。 它里面的所有東西都是可點擊的。

<CardActionArea>
   <CardMedia>
   .......Image Stuff
   </CardMedia>
   <CardContent>
   .......Content
   </CardContent>
</CardActionArea>

Answer 7

只需在您的卡片中添加 onPress 道具

 <Card
                          onPress = {() => {console.log('onclick')}}
                          style={styles.item}
                          status="basic"
                          header={(headerProps) =>
                            this.renderItemHeader(headerProps, item)
                          }>
                          <Text>{item.description}</Text>
                        </Card>

Answer 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;

Answer 9

在 MUI5 中：

將卡片放在<Box />中，然后使卡片成為<a>標記組件。

<Box component='a' href='/dashboard' sx={{ textDecoration: 'none' }}>
    <Card sx={{ height: '200px', cursor: 'pointer'}}>
        <CardContent>
           //CardContent
        </CardContent>
    </Card>
</Box>

添加樣式，例如：

• 刪除文本裝飾，因為您添加了<a>標記
• 為您的卡片指定首選高度
• 將光標更改為將鼠標懸停在卡片上的指針

Answer 10

使用 NextJS 進行路由，這兩種方法對我有用。

1. 用 (NextJS) <Link>組件包裝<CardActionArea> ：

import Link from 'next/link'

<Card>
  <Link href='/your-target-path' passHref>
    <CardActionArea>
      ...
    </CardActionArea>
  </Link>
</Card>

2. 使用效果useRouter在點擊時推送路由：

import { useRouter } from 'next/router'

const router = useRouter()

<Card>
  <CardActionArea onClick={() => {router.push('/your-target-path')}}>
    ...
  </CardActionArea>
</Card>

請注意，使用第二種方法，您的瀏覽器將無法識別 URL，即不會填充活動欄（出現在懸停時）。