Question

我在React项目中使用Material UI Next。我有卡组件，里面有图像（卡片介质）和文本（卡片文本）。我的文字下方还有一个按钮。我的问题是..如何使整张卡片可点击？即。无论用户是否按下卡片文本，卡片图像或按钮，都应触发我在按钮上调用的onClick事件。

Answer 1

2018年8月第3版的更新

已添加特定的CardActionArea component以在 3.0.0的Material UI 中具体涵盖此案例。

只有在您遇到v1时才能使用以下解决方案。

您可能希望实现的是卡片顶部的Card Action (see specification)。

Web库的Material Components将其作为first usage example for the Card Component。

通过使用强大的Card*组件组合MUI 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之外。

Answer 2

在Material UI 4.9.10中，此方法有效。

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

如果您使用的是React Router，这也可以。

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

Answer 3

您可以将onClick={clickFunction}添加到卡的包含div中，该div链接到与按钮相同的功能。

Answer 4

感谢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 5

我们还可以使用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 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;

如何使用React JS在Material UI中单击整个Card组件？

8 个答案: