Ajaxで送信した文字列をjsonに変換し、返ってきたデータをリスト表示させようとしていて、CommentFormからCommentBoxまでは渡せたのですが、そこからCommentListに渡そうとしてもうまくいきません、どのようにすればうまく渡すことができるのでしょうか、ご教授いただきたいです。
javascript
1import request from 'superagent' 2import React from 'react' 3import ReactDOM from 'react-dom' 4 5class CommentBox extends React.Component{ 6 constructor(props) { 7 super(props) 8 this.state = {data: []} 9 } 10 loadCommentsFromServer(data){ 11 this.setState(data) 12 } 13 render() { 14 return ( 15 <div className="commentBox"> 16 <h1>Comments</h1> 17 <CommentList data={this.state.data} /> 18 <CommentForm url={this.props.url} onEventCallBack={this.loadCommentsFromServer.bind(this)} /> 19 </div> 20 ) 21 } 22} 23 24class CommentList extends React.Component{ 25 constructor(props) { 26 super(props) 27 } 28 render() { 29 const commentNodes = this.props.data.map( single => { 30 return ( 31 {single} 32 ) 33 }) 34 return ( 35 <div className="commentList"> 36 {commentNodes} 37 </div> 38 ) 39 } 40} 41 42class CommentForm extends React.Component{ 43 constructor(props) { 44 super(props) 45 this.state = {param: []} 46 } 47 handleParamChange(e) { 48 this.setState({param: e.target.value}) 49 } 50 gettingDataByParams(e){ 51 request 52 .get(this.props.url) 53 .query({param:this.state.param}) 54 .end(( err, res ) => { 55 let data = JSON.parse(res.text) 56 this.props.onEventCallBack(data); 57 }) 58 e.preventDefault() 59 } 60 render() { 61 return ( 62 <form className="commentForm" onSubmit={this.gettingDataByParams.bind(this)} > 63 <input type="text" value={this.state.param} onChange={this.handleParamChange.bind(this)} /> 64 <input type="submit" value="Post" /> 65 </form> 66 ) 67 } 68} 69 70ReactDOM.render( <CommentBox url="/test.php" />, document.getElementById('content') )
json
1{ 2 param: [ 3 "hoge", 4 "fuga" 5 ] 6}
回答1件
あなたの回答
tips
プレビュー