質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.53%
Material-UI

Material-UIは、Material Designを利用可能なオープンソースのReact向けUIコンポーネントキットです。

onclick

onclickとはユーザーのクリック処理を指します。これは"onmousedown"(押下)と"onmouseup"(押上)の二つの事象の組み合わせです

React.js

Reactは、アプリケーションのインターフェースを構築するためのオープンソースJavaScriptライブラリです。

Q&A

解決済

2回答

12768閲覧

React:Meterial-UIを使ったクリック処理

gomasan

総合スコア96

Material-UI

Material-UIは、Material Designを利用可能なオープンソースのReact向けUIコンポーネントキットです。

onclick

onclickとはユーザーのクリック処理を指します。これは"onmousedown"(押下)と"onmouseup"(押上)の二つの事象の組み合わせです

React.js

Reactは、アプリケーションのインターフェースを構築するためのオープンソースJavaScriptライブラリです。

0グッド

0クリップ

投稿2020/08/09 02:15

編集2020/08/09 04:44

仕事の都合でReactを初めまして、Material-UIの使い方がよく分かっておりません、、
やりたいこととしては、SNSの「いいねボタン」に似たものを作ることです。

MaterialUIのサイトから持ってきたハートアイコンを使おうと思います。
それをボタンとしての役割にする方法が分からず質問です。

実際に書いたコード

最初は

SnsList.js

1import React, { Component } from 'react'; 2import FavoriteBorderIcon from '@material-ui/icons/FavoriteBorder'; 3 4class Sns extends Component { 5 render() { 6 return( 7 <FavoriteBorderIcon onClick = {() => this.props.SnsPost()}/> 8 ); 9 } 10}

でしたが、当然ただアイコンが表示されただけでしたので、buttonタグで囲みました。

React

1import React, { Component } from 'react'; 2import FavoriteBorderIcon from '@material-ui/icons/FavoriteBorder'; 3 4class Sns extends Component { 5 render() { 6 return( 7 <button><FavoriteBorderIcon onClick = {() => this.props.SnsPost()}/></button> 8 ); 9 } 10}

この実行結果が以下の写真となります(左のゴミ箱マークは今回は質問対象外です)
イメージ説明

実現したいこと

ハートアイコンそのものをボタンとして機能させること

buttonタグを使うと、ハートアイコンはボタンとして処理できるのですが、これをハートアイコンだけにするにはどうすれば良いでしょうか(ハートを囲っているグレー部分を無くす)

これを押すと右側にいいねの数をカウントしていきたいと思っています。

補足

※stateはApp.jsで保持しており、

onClick = {() => this.props.SnsPost()}

SnsPost()

はApp.jsファイルで定義します。

また、Firebaseやreduxなどは使用しません。

ご存知の方がいらっしゃいましたら、ご教示いただけますと幸いです。
よろしくお願いいたします。

解決したコード

回答いただいたbuttonタグにonClick処理を書き込みました。

一度失敗した例

React

1<button onClick = {() => this.props.SnsPost()}><FavoriteBorderIcon /></button>

これだと変わらずグレーの四角に囲まれたままでした。

Buttonで解決しました。

React

1import { Button } from '@material-ui/core'; 2 3<Button onClick = {() => this.props.SnsPost()}><FavoriteBorderIcon /></Button> 4コード

左のゴミ箱マークはただのアイコンなので少し位置がずれていますが、マウスを当てたらグレーがかります。
マウスあてる前↓
イメージ説明
マウスあてた時↓
イメージ説明

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答2

0

こんにちは。ベストアンサー決定後に失礼します。

IconButton を使うとよいかと思います。

投稿2020/08/09 04:56

jun68ykt

総合スコア9058

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

gomasan

2020/08/09 05:33

わぁありがとうございます...! IconButtonというものもあるんですね。見た目がとても綺麗です。コードも作っていただきありがとうございます。いただいたIconButtonのやり方でやってみます。本当にありがとうございます。
guest

0

ベストアンサー

buttonタグにonClickを設定する形だと意図通りではないでしょうか?

投稿2020/08/09 04:29

kmtr

総合スコア213

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

gomasan

2020/08/09 04:38

ありがとうございます!できました!! 一応書いたコードも追記します。ありがとうございます。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.53%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問