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

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

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

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

React.js

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

Q&A

解決済

1回答

9791閲覧

React.jsを用いてラジオボタンで選択されている項目を取得

IkedaIori

総合スコア14

JavaScript

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

React.js

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

0グッド

2クリップ

投稿2015/12/25 07:33

現在、webアプリケーションの制作を行っており、React.jsを用いて、ラジオボタンで選択されている項目を取得したいと考えています。
以下のサイトを読んでみたのですが、ラジオボタンをグループ分けする方法が分からず困っています。
React.js で親コンポーネントと子コンポーネントが連携するシンプルなサンプルを書いてみた
ラジオボタンをグループ分けする方法、もしくは参考書籍やwebサイト等が知りたいです。
初心者で至らない点もございますが、何卒よろしくお願いします。

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

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

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

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

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

guest

回答1

0

ベストアンサー

ラジオボタンのグループ分けですが、Reactは関係なく同じ名前のinputが同じグループに所属します。
私もReact.jsを勉強中ですので、勉強のためにリンクと公式チュートリアルを参考に書いてみました。
おかしいところもあるかもしれませんが。。

RadioGrpのgrpnameに指定した名前がそれぞれのグループになります。
コピペしてhtmlファイルとして保存していただければ動くと思います。

html

1<!DOCTYPE html> 2<html> 3<head> 4<meta charset="UTF-8"> 5 <script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.3/react.js"></script> 6 <script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.3/react-dom.js"></script> 7 <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js"></script> 8</head> 9<body> 10<div id='container1'></div> 11<div id='container2'></div> 12<script type="text/babel"> 13var RadioGrp = React.createClass({ 14 getInitialState: function(){ 15 return {value: "nothing"} 16 }, 17 handleChanged: function(value){ 18 this.setState({value: value}); 19 }, 20 render: function(){ 21 var grpName = this.props.grpname 22 var handleChanged = this.handleChanged 23 var radioBtns = this.props.choice.map(function(v){ 24 return ( 25 <RadioBtn grpname={grpName} val={v} onChanged={handleChanged}/> 26 ); 27 }); 28 return ( 29 <div className="radioGrp"> 30 <fieldSet> 31 <legend> 32 {this.props.grpname} 33 <span>({this.state.value} is selected)</span> 34 </legend> 35 {radioBtns} 36 </fieldSet> 37 </div> 38 ); 39 } 40}); 41var RadioBtn = React.createClass({ 42 render: function() { 43 return ( 44 <div className="radioBtn"> 45 <input type='radio' name={this.props.grpname} value={this.props.val} onChange={this.handleChanged}/>{this.props.val} 46 </div> 47 ); 48 }, 49 handleChanged: function(e){ 50 var checked = e.target.checked; 51 this.setState({checked: checked}); 52 if(checked){ 53 this.props.onChanged.apply(this.props, [this.props.val]); 54 } 55 }, 56 57}); 58ReactDOM.render( 59 <RadioGrp grpname="grp1" choice={["aaa1","bbb1","ccc1"]}/>, 60 document.getElementById('container1') 61); 62ReactDOM.render( 63 <RadioGrp grpname="grp2" choice={["aaa2","bbb2","ccc2"]}/>, 64 document.getElementById('container2') 65); 66</script> 67</body> 68</html>

投稿2015/12/27 13:10

jinco

総合スコア432

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

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

IkedaIori

2015/12/27 14:14

サンプルコードまで書いていただきありがとうございます!自分も、もう一度公式チュートリアルからやり直してみます。ありがとうございました。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問