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

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

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

Rubyはプログラミング言語のひとつで、オープンソース、オブジェクト指向のプログラミング開発に対応しています。

Ruby on Rails

Ruby on Railsは、オープンソースのWebアプリケーションフレームワークです。「同じことを繰り返さない」というRailsの基本理念のもと、他のフレームワークより少ないコードで簡単に開発できるよう設計されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

React.js

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

Q&A

0回答

550閲覧

react componentへのデータ(HTMLタグのid)の渡し方

solt0723

総合スコア67

Ruby

Rubyはプログラミング言語のひとつで、オープンソース、オブジェクト指向のプログラミング開発に対応しています。

Ruby on Rails

Ruby on Railsは、オープンソースのWebアプリケーションフレームワークです。「同じことを繰り返さない」というRailsの基本理念のもと、他のフレームワークより少ないコードで簡単に開発できるよう設計されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

React.js

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

0グッド

0クリップ

投稿2017/12/09 08:39

編集2022/01/12 10:55

###前提・実現したいこと
jQuery で取得した button タグの id を react component に渡したいと思っています。

React
jQuery
Rails 4.2.2
Ruby 2.0.0
で開発をしています。

###実装がうまくいかない箇所のコード
jQuryで取得したHTMLタグのidをreact componentに渡せず困っています、
(jQueryを利用せずとも、最終的にはidをどうにかしてreact componentに渡したいと思っています)

btn-old-micropost class のボタンがクリックされた時に react component を生成しているのですが、
その時に、クリックされたボタンの id を react component に渡す事ができずに困っています。

実装としては、まず、下記のようにボタンにデータのidを割り振っています。
erbでtwitter のツイートのようなリストが表示され、そのツイートのidを割り振っています。

html

1 <button class="btn-old-micropost view-protocol" id="<%= micropost.id %>" > 2 <h2 class="title" style="margin: 0px"><%= micropost.content %></h2> 3 <h2 class="messageBox" style="margin: 0px"> 4 <%= User.feed_protocol(micropost.id) %> 5 </h2>

つぎに、上記のbutton classがクリックされた時に jQuery で id を取得しています。

js

1$(document).ready(function() { 2 var toggle_status = "closed"; 3 $(".btn-old-micropost").click(function(){ 4 if (toggle_status == "closed") { 5 var id = $(this).attr("id"); 6 $(".view-micropost-edit").fadeIn(50); 7 console.log(id); 8 console.log("opened edit"); 9 toggle_status = "opened 1"; 10 } else { 11 $(".view-micropost-edit").fadeOut(50); 12 console.log("closed edit"); 13 toggle_status = "closed"; 14 } 15 }); 16});

すると、HTML で react component が呼び出されているのですが、react component に jQuery で取得した id を渡す方法が分からず行き詰まっています。
最終的には、下記の'EditMessageBox'という component に id をなんとかして渡したいです。

html

1 <div class="col-md-4 container view-micropost-edit"> 2 <div> 3 <section class="micropost_form"> 4 <%= render 'shared/micropost_form' %> 5 </section> 6 <%= p = react_component 'EditMessageBox' %> 7 <!-- <%= p = react_component 'ProtocolBox' %> --> 8 </div> 9 </div>

追加で情報が必要であればコメントいただけると助かります。
よろしくお願いします。

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

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

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

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

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

guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだ回答がついていません

会員登録して回答してみよう

アカウントをお持ちの方は

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問