###前提・実現したいこと
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>
追加で情報が必要であればコメントいただけると助かります。
よろしくお願いします。
あなたの回答
tips
プレビュー