html+javascript(react)の使用方法について教えて頂けますでしょうか?
①
script = html内で指定したファイル内の処理を読み込む
require & import = javascript内で指定したファイル内の処理を読み込む
という認識なのですがあっていますでしょうか?
②
reactを使用する際、
「npm install --save react-modal」でインストール後、
javascript内で「var Modal = require('react-modal');」と宣言して
Modalを使用するようですが、html内で、
③
以下にサンプルプログラムを用意しました。
<button onClick={this.modal.bind(this)}>Click!</button>
を押した際に、Modal(ダイアログ)を表示させたいのですが、方法がわからず困っております。アドバイス頂けないでしょうか?
html
1<!DOCTYPE html> 2<html> 3 <head> 4 5 <link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"> 6 <script src="https://npmcdn.com/react@15.3.0/dist/react.min.js"></script> 7 <script src="https://npmcdn.com/react-dom@15.3.0/dist/react-dom.min.js"></script> 8 <script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.13.3/JSXTransformer.js"></script> 9 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css"> 10 <script src = "https://cdn.bootcss.com/react-modal/1.6.5/react-modal.min.js"></script> 11 <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.34/browser.min.js"></script> 12 <script src="https://cdnjs.cloudflare.com/ajax/libs/remarkable/1.6.2/remarkable.min.js"></script> 13 <script src="https://code.jquery.com/jquery-3.1.0.min.js"></script> 14 <script src="src/script.js" type="text/babel"></script> 15 16 </head> 17 18 <body class="hold-transition skin-blue-light sidebar-mini"> 19 <div class="wrapper"></div> 20 <div id="content"></div> 21 <div class="content"></div> 22 </body> 23</html> 24
javascript
1 2 3/* メモ 4getInitialState() ・・・ 初期値を定めます。コンポーネントがマウントされる直前に実行され、戻り値はthis.stateの初期値として使用されます。 5 6componentDidMount() ・・・ クライアント上(サーバー上は除く)でのみ、初期描画(rendering)が発生した直後に一度実行されます。 7 AJAXのリクエストの送信などの操作をこのメソッド内で行って下さい。 8 9setState() ・・・ 基本的にはgetIntialStateでstateの初期値を返して、データに変更があった場合にthis.setStateで更新します。 10 11bind() ・・・ 呼び出された時に新しい関数を生成します。最初の引数 thisArg は新しい関数の this キーワードにセットされます。2個目以降の引数は、新しい関数より前に、ターゲット関数の引数として与えられます。 12 13this.props.data.map() ・・・ map()メソッドは、与えられた関数を配列のすべての要素に対して呼び出し、その結果からなる新しい配列を生成します。 14*/ 15 16var CommentBox = React.createClass({ 17 getInitialState: function() { 18 return {data: []}; 19 }, 20 componentDidMount: function() { 21 $.ajax({ 22 url: this.props.url, 23 dataType: 'json', 24 cache: false, 25 success: function(data) { 26 alert("jsonアクセス成功"); 27 console.log(data); 28 this.setState({data: data}); 29 }.bind(this), 30 error: function(xhr, status, error) { 31 alert("jsonアクセス失敗"); 32 console.error(this.props.url, status, error.toString()); 33 }.bind(this) 34 }); 35 }, 36 render: function() { 37 return ( 38 <div className="commentBox"> 39 <CommentList data={this.state.data} /> 40 </div> 41 ); 42 } 43}); 44 45var CommentList = React.createClass({ 46 modal: function() { 47 console.log("Modal(ダイアログ)表示"); 48 return( 49 <Modal>modal contents</Modal> 50 ) 51 }, 52 render: function() { 53 var commentNodes = this.props.data.map(function(comment) { 54 console.log(comment); 55 return ( 56 <tr key={comment.id}> 57 <td>{comment.test_no}</td> 58 <td>{comment.test_name}</td> 59 <td> 60 <button onClick={this.modal.bind(this)}>Click!</button> 61 62 <button className="btn btn-primary btn-sm" data-toggle="modal" data-target="#modal-example"> 63 <i className="glyphicon glyphicon-edit" /> 64 </button> 65 66 <button className="btn btn-danger btn-sm"> 67 <i className="glyphicon glyphicon-trash" /> 68 </button> 69 </td> 70 </tr> 71 ); 72 }.bind(this)); 73 return ( 74 <table className="table table-striped"> 75 <thead> 76 <th>No.</th> 77 <th>名前</th> 78 <th>編集</th> 79 </thead> 80 <tbody> 81 {commentNodes} 82 </tbody> 83 </table> 84 ); 85 } 86}); 87 88ReactDOM.render( 89 <CommentBox url="php/show.php" />, 90 document.getElementById('content') 91); 92
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。