2016-12-07 6 views
0

clickSubmitComment()メソッドでは、テキストエリアのコメントテキストの配列にロジックを追加する必要がありますが、私はまだ教えてどのようにリンクを共有するか教えています。コメントを追加するjsx logic

comment.jsx:

import React from 'react'; 

export default class Comment extends React.Component { 
    constructor(props){ 
     super(props); 
    } 
    render() { 
     const comment = this.props.comment.map((commentForm, index) => { 
     return <CommentForm key={index} {...commentForm}/> 
     }); 
     return (
      <div className="media-body">{comment}<br></br></div> 
     ); 
    } 
} 

と、commentForm.jsx:

import React from 'react'; 

export default class CommentForm extends React.Component { 
    constructor(props){ 
     super(props); 
     this.clickSubmitComment = this.clickSubmitComment.bind(this); 
     this.comments = []; 
    } 

    clickSubmitComment() { 
     textarea -> comments -> send props to comment.jsx and view? 
    } 

    render() { 
     return (
      <div><textarea className="form-control" rows="3"></textarea><br></br> 
      <button type="submit" className="btn btn-primary" onClick={this.clickSubmitComment}>Submit</button></div> 
     ); 
    } 
} 
+0

あなたはとても残念、親コンポーネントすなわちコメント – duwalanise

+0

はいはいにテキストエリアで書かれたテキストを渡すもしかして –

答えて

1

があなたのテキストエリアにのonChangeを追加し、状態にその値を保存し、状態値を取得する]をクリックしonButton。このような何か:

class Test extends React.Component { 
     constructor(props){ 
     super(props); 

     this.state = { 
     comment: "" 
     } 
    } 

    handleComment(e){ 
     this.setState({comment: e.target.value}); 
    } 

    clickSubmitComment(){ 
     let comment = this.state.comment; 
     //Do what you will with the comment 
    } 

     render(){ 
     return (
     <div> 
      <div><textarea className="form-control" rows="3" onChange={this.handleComment.bind(this)}>{this.state.comment}</textarea><br></br> 
      <button type="submit" className="btn btn-primary" onClick={this.clickSubmitComment.bind(this)}>Submit</button></div> 
     </div> 
    ) 
    } 
} 

React.render(<Test />, document.getElementById('container')); 

Here is a fiddle.

1
import React from 'react'; 

    export default class Comment extends React.Component { 
     constructor(props){ 
      super(props); 
     } 
     handleCommentChange(text){ 
     // do something with the text 
     } 
     render() { 
      const comment = this.props.comment.map((commentForm, index) => { 
      return <CommentForm key={index} {...commentForm} handleCommentChange = {this.handleCommentChange.bind(this)}/> 
      }); 
      return (
       <div className="media-body">{comment}<br></br></div> 
      ); 
     } 
    } 


    import React from 'react'; 

    export default class CommentForm extends React.Component { 
     constructor(props){ 
      super(props); 
      this.state = { 
       text: '' 
      }; 
      this.updateState = this.updateState.bind(this); 
     } 

     updateState(e){ 
      this.setState({text: e.target.value}); 
     } 

     render() { 
      return (
       <div><textarea value={this.state.text} className="form-control" onChange={this.updateState()} rows="3"></textarea><br></br> 
       <button type="submit" className="btn btn-primary" onClick={this.props.handleCommentChange(this.state.text)}>Submit</button></div> 
      ); 
     } 
    } 
関連する問題