ボタンを押したら数値が変わるプログラム
react.jsから取得した数値を使って、getで他のページに送信しようと思い、<a href="page3.html?id={this.state.counter}">リンク</a>
と入れましたが、htmlで<a href="page3.html?id={this.state.counter}" data-reactid=".0.5">リンク</a>
とそのまま吐き出されてしまいました。
どのように書いたら、hrefの中で変数を変換することができますか?
また、Reactの記入はES6に変更したいと思っているので、そのやり方も教えていただけるとありがたいです。
js
1var Button = React.createClass({ 2 localHandleClick: function(){ 3 this.props.localHandleClick(this.props.increment); 4 }, 5 render: function(){ 6 return ( 7 <button onClick={this.localHandleClick}>{this.props.increment}</button> 8 ); 9 } 10}); 11 12var Result = React.createClass({ 13 render: function(){ 14 return( 15 <div>{this.props.localCounter}</div> 16 ); 17 } 18}); 19 20var Main = React.createClass({ 21 getInitialState: function(){ 22 return {counter: 0}; 23 }, 24 //ボタンがクリックされたら 25 handleClick: function(increment){ 26 this.setState({counter:increment}); 27 }, 28 render: function(){ 29 return( 30 <div> 31 <Button localHandleClick={this.handleClick} increment={1} /> 32 <Button localHandleClick={this.handleClick} increment={2} /> 33 <Button localHandleClick={this.handleClick} increment={3} /> 34 <Button localHandleClick={this.handleClick} increment={4} /> 35 <Result localCounter={this.state.counter} /> 36 <a href="page3.html?id={this.state.counter}">リンク</a>//ここの部分 37 </div> 38 ); 39 } 40}); 41 42React.render( 43 <Main />, 44 document.getElementById("display_wrap") 45 ); 46
html
1<div id="display_wrap"></div>
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。