Im с использованием Material UI Next в проекте React. У меня есть компонент Card, в котором есть изображение (Card Media) и текст (Card Text). У меня также есть кнопка под текстом. Мой вопрос заключается в том, чтобы сделать всю карту доступной? то есть. Независимо от того, нажимает ли пользователь текст карты или изображение карты или кнопка, он должен вызывать событие onClick, которое я вызываю на кнопке.
Как сделать весь компонент карты кликабельным в пользовательском интерфейсе материалов с помощью React JS?
Ответ 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>