javascript - 如何使用 React JS 在 Material UI 中使整个 Card 组件可点击？

Question

我正在使用 Material UI Next在 React 元素中。我有一个 Card 组件，里面有一个图像(Card Media)和一个文本(Card Text)。我在文本下方也有一个按钮。我的问题是..如何使整张卡片可点击？ IE。无论用户按下卡片文本、卡片图像还是按钮，都应该触发我在按钮上调用的 onClick 事件。

Answer 1

Update for v3 — 29 of August 2018

A specific CardActionArea component has 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.

您可能想要实现的是 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 之外。