web-dev-qa-db-fra.com

Comment rendre tout le composant de la carte cliquable dans l'interface utilisateur Matériau à l'aide de React JS?

Je suis en utilisant UI de matériau Suivant dans un projet React. J'ai le composant Card qui contient une image (Card Media) et un texte (Card Text). J'ai aussi un bouton sous le texte. Ma question est .. comment rendre la carte entière cliquable? c'est à dire. Qu'un utilisateur appuie sur le texte de la carte, sur l'image de la carte ou sur le bouton, cela devrait déclencher l'événement onClick que j'appelle sur le bouton.

javascriptcssreactjsmaterial-designmaterial-ui
10
SeaWarrior404

Vous pouvez ajouter un onClick={clickFunction} au div contenant de la carte qui renvoie à la même fonction que le bouton. 

3
Pandelis

Nous pouvons également utiliser la balise Link pour rendre l'ensemble du composant Card cliquable et pour la 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

Emballez simplement le tout dans le composant Matériau CardActionArea. Tout ce qui est à l'intérieur sera cliquable.

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