Как сделать весь компонент карты кликабельным в пользовательском интерфейсе материалов с помощью React JS?

Im с использованием Material UI Next в проекте React. У меня есть компонент Card, в котором есть изображение (Card Media) и текст (Card Text). У меня также есть кнопка под текстом. Мой вопрос заключается в том, чтобы сделать всю карту доступной? то есть. Независимо от того, нажимает ли пользователь текст карты или изображение карты или кнопка, он должен вызывать событие onClick, которое я вызываю на кнопке.

Ответ 1

Update for v3 — 29 of August 2018

Определенный компонент CardActionArea был добавлен, чтобы охватить именно этот случай в версии 3.0.0 пользовательского интерфейса материала.

Пожалуйста, используйте следующее решение, только если вы застряли с v1.

Вероятно, вы хотите добиться действия карты (см. спецификацию) в верхней части карты.

Библиотека "Компоненты материалов для веб-сайта" содержит это в качестве первого примера использования компонента карты.

Вы можете легко воспроизвести это точное поведение, составив компоненты 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.

Ответ 2

Мы также можем использовать тег Link, чтобы сделать весь компонент Card кликабельным и для навигации

import { Link } from 'react-router-dom';
function myCard() {
  return (
    <Link to={'/give_your_path'}>
     <Card>
      <Card text="This is text"/>
     </Card>
    </Link>
  );
}

Ответ 3

Вы можете добавить onClick={clickFunction} в содержащий div onClick={clickFunction} который ссылается на ту же функцию, что и кнопка.

Ответ 4

Просто оберните все это в компоненте Material CardActionArea. Все внутри него будет доступно.

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

Ответ 5

Вот решение, которое сработало для нас, благодаря fooobar.com/info/15232583/...

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>