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

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

新規登録して質問してみよう
ただいま回答率
85.50%
JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

React.js

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

Q&A

解決済

2回答

4005閲覧

react.jsでliタグに複数ボタンを配置したい

femto6

総合スコア18

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

React.js

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

0グッド

0クリップ

投稿2016/09/08 04:59

![イメージ

画像のような形で、

html

1<li> 2 <button type="submit" onClick="hoge()">hoge</button> 3 <button type="submit" onClick="huga()">huga</button> 4 <button type="submit" onClick="piyo()">piyo</button> 5</li>

という形のコンポーネントを作成しようとしています。
ボタン自体は作成することが出来たのですが、クリックイベントを一つしか登録することが出来ないです。
いい方法はありますでしょうか?

reduxを使用していますので、それに即した内容ですとありがたいです。

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

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

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

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

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

guest

回答2

0

自己解決

onClickにそれぞれ以下のように記述したら期待通り動作しました。
ここの他にもconnectでpropsにdispatchを登録する処理など別の部分も修正したため、そのあたりも上手く動かなかった原因かもしれないです。

const foo = ({ hoge, huga, piyo }) => { return( <li> タスク <button type="submit" onClick={() => hoge()}>完了</button> <button type="submit" onClick={() => huga()}>未完了</button> <button type="submit" onClick={() => piyo()} >削除</button> </li> ) }

投稿2016/09/08 06:57

femto6

総合スコア18

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

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

0

クリックイベントを複数登録というのはちょっと意味がわかりません…。
そのクリックでどのイベントを発生させるのかなんて判定させられないですよね。

クリックイベントではなく、クリックしたときに複数のfunctionを実行したいということなんでしょうか?
もしそうなら、クリックイベントを複数作るのではなく、functionの中でクリックされたボタンが何かを判定して、それによってほかのfunctionを呼び出す造りにすれば良いと思います。

①ボタンがクリックされたら
②クリックされたボタンがどれかを特定
③if文とかswitch文などで分岐
④hoge();fuga();piyo();など実行するfunctionを呼び出す

または

①ボタンがクリックされたら
②引数で実行したいfunctionを渡す
③渡された引数から、hoge();fuga();piyo();など実行するfunctionを呼び出す

この処理を行うfunctionをひとつ作って、すべてのボタンのonClickイベントに共通で設定すれば良いのではないでしょうか。

投稿2016/09/08 05:10

NatsumiOki

総合スコア1298

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

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

femto6

2016/09/08 05:28

書き方が曖昧で申し訳ありません。 やりたいことはそれぞれのボタンでそれぞれに対応するactionをdispatchするといった処理です。 前者の方法を一度ためしてみます
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問