web-dev-qa-db-ja.com

React JSを使用して、素材UIでカードコンポーネント全体をクリック可能にする方法は？

Material UI Next Reactプロジェクトを使用しています。画像（カードメディア）とテキスト（カードテキスト）を含むCardコンポーネントがあります。テキストの下にボタンがあります。私の質問は、カード全体をクリック可能にする方法ですか？つまり、ユーザーがカードのテキスト、カードの画像、またはボタンを押すかどうかは、私が呼び出すonClickイベントをトリガーする必要がありますボタン。

javascriptcssreactjsmaterial-designmaterial-ui
14
SeaWarrior404

v3の更新— 2018年8月29日

特定の [CardActionArea component が追加され、Material UIのバージョン3.0.でこのケースを具体的にカバーしています。

次の解決策は、v1で動けない場合にのみ使用してください。

おそらく達成したいのは、カードの上部にある Card Action（仕様を参照） です。

Webライブラリのマテリアルコンポーネントには、これが カードコンポーネントの最初の使用例 としてあります。

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の外側に維持するために強くお勧めします。

21
Pier Paolo Ramon

Linkタグを使用して、カードコンポーネント全体をクリック可能にし、ナビゲーションすることもできます。

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

ボタンと同じ機能にリンクするカードのdivにonClick={clickFunction}を追加できます。

3
Pandelis

Material CardActionAreaコンポーネントですべてをラップするだけです。内部のすべてがクリック可能になります。

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

https://stackoverflow.com/a/50444524/192092 のおかげで、ここに私たちのために働いた解決策があります

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