コメントを追加するjsx logic

Question

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

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> 
     ); 
    } 
} 

Answer 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.

Answer 2

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> 
      ); 
     } 
    }