現在、webアプリケーションの制作を行っており、React.js
を用いて、ラジオボタンで選択されている項目を取得したいと考えています。
以下のサイトを読んでみたのですが、ラジオボタンをグループ分けする方法が分からず困っています。
React.js で親コンポーネントと子コンポーネントが連携するシンプルなサンプルを書いてみた
ラジオボタンをグループ分けする方法、もしくは参考書籍やwebサイト等が知りたいです。
初心者で至らない点もございますが、何卒よろしくお願いします。
気になる質問をクリップする
クリップした質問は、後からいつでもMYページで確認できます。
またクリップした質問に回答があった際、通知やメールを受け取ることができます。
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
回答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
総合スコア432
あなたの回答
tips
太字
斜体
打ち消し線
見出し
引用テキストの挿入
コードの挿入
リンクの挿入
リストの挿入
番号リストの挿入
表の挿入
水平線の挿入
プレビュー
質問の解決につながる回答をしましょう。 サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。 また、読む側のことを考えた、分かりやすい文章を心がけましょう。
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2015/12/27 14:14