添加注释 jsx 逻辑

Question

需要在clickSubmitComment()方法中，写逻辑添加到textarea的评论文本数组中，我还在学习告诉我如何或分享一个link。

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 添加到您的textarea 并将其值保存到状态，然后点击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>
            );
        }
    }

添加注释 jsx 逻辑

add comment jsx logic

comments

reactjs