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

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

6
css javascript material-design material-ui reactjs

3 ответов

обновление для v3-29 августа 2018

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

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

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

материальные компоненты для веб-библиотеки имеют это как свой первый пример использования для компонента карты.

вы можете легко воспроизвести это точное поведение, составив MUI Card* компоненты с могучими

9

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

2

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

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