wake-up-neo.com

Wie kann ich die gesamte Kartenkomponente in der Material-Benutzeroberfläche mit React JS anklickbar machen?

Ich verwende Material UI Next in einem React-Projekt. Ich habe die Kartenkomponente, die ein Bild (Kartenmedium) und Text (Kartentext) enthält. Ich habe auch einen Button unter dem Text. Meine Frage ist ... wie kann ich die ganze Karte anklickbar machen? dh. Unabhängig davon, ob ein Benutzer auf den Kartentext, das Kartenbild oder die Schaltfläche drückt, sollte das onClick-Ereignis ausgelöst werden, das ich auf der Schaltfläche anrufe.

10
SeaWarrior404

Update für Version 3 - 29. August 2018

Eine spezielle CardActionArea Komponente wurde hinzugefügt, um speziell diesen Fall in Version 3.0.0 der Material-Benutzeroberfläche abzudecken.

Bitte verwenden Sie die folgende Lösung nur, wenn Sie mit v1 nicht weiterkommen.

Was Sie wahrscheinlich erreichen möchten, ist eine Kartenaktion (siehe Spezifikation) im oberen Teil der Karte.

Die Material Components for Web-Bibliothek hat dies als erstes Verwendungsbeispiel für die Kartenkomponente .

Sie können dieses genaue Verhalten leicht reproduzieren, indem Sie MUI-Komponenten Card* Mit der mächtigen Komponente ButtonBase zusammensetzen. Ein laufendes Beispiel finden Sie hier auf CodeSandbox : https://codesandbox.io/s/q9wnzv7684.

Der relevante Code lautet:

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)

Außerdem empfehle ich dringend , die CardActions -Komponente außerhalb der ButtonBase zu belassen.

21

Sie könnten dem übergeordneten Div der Karte einen onClick={clickFunction} hinzufügen, der auf dieselbe Funktion wie die Schaltfläche verweist. 

3
Pandelis

Wir können auch das Link-Tag verwenden, um die gesamte Kartenkomponente anklickbar zu machen und zur Navigation

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

Hier ist die Lösung, die dank https://stackoverflow.com/a/50444524/192092 für uns funktioniert hat

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>
0
Roy Hyunjin Han

Wickeln Sie das Ganze einfach in die Material CardActionArea-Komponente ein. Alles, was sich darin befindet, wird anklickbar sein.

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