添加评论jsx逻辑

Question

它需要在方法clickSubmitComment（）中，写入逻辑添加到textarea的注释文本数组中，我仍在学习如何告诉我如何或共享一个链接。

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