React: Creating New Components

Creating New Components trong ReactJS.

Mã nguồn tham khảo:

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8" />
    <title>Creating New Components</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
    <script src="https://npmcdn.com/[email protected]/dist/react.min.js"></script>
    <script src="https://npmcdn.com/[email protected]/dist/react-dom.min.js"></script>
    <script src="https://npmcdn.com/[email protected]/browser.min.js"></script>
    <style type="text/css">
    .mb5px {
        margin-bottom: 5px
    }
    </style>
</head>

<body style="padding:20px">
    <div id="example"></div>
    <script type="text/babel">
        var Comment = React.createClass({
            getInitialState: function() {
                return {editing: false}
            },
            edit: function() {
                this.setState({editing: true});
            },
            save: function() {
                this.props.updateCommentText(this.refs.newText.value, this.props.index);
                this.setState({editing: false});
            },
            remove: function() {
                this.props.deleteFromBoard(this.props.index);
            },
            renderNormal: function() {
                return (
                    <div className="media">
                        <div className="media-body">
                            <h4 className="media-heading">{this.props.children}</h4>
                            <button onClick={this.edit} className="btn btn-primary">Edit</button>  
                            <button onClick={this.remove} className="btn btn-danger">Remove</button>
                            <hr />
                        </div>
                    </div>
                );
            },
            renderForm: function() {
                return (
                    <div className="media">
                        <div className="media-body">
                            <textarea ref="newText" className="form-control mb5px">{this.props.children}</textarea>
                            <button onClick={this.save} className="btn btn-success">Save</button>
                            <hr />
                        </div>
                    </div>
                );
            },
            render: function() {
                if (this.state.editing) {
                    return this.renderForm();
                } else {
                    return this.renderNormal();
                }
            }
        });

        var Board = React.createClass({
            getInitialState: function() {
                return {
                    comments: [
                        'Yeah yeah!',
                        'Hell yeah!',
                        'Aw yeah!'
                    ]
                };
            },
            add: function() {
                var cmts = this.state.comments;
                cmts.push(this.refs.newCommentText.value);
                this.setState({comments: cmts});
            },
            removeComment: function(i) {
                var cmts = this.state.comments;
                cmts.splice(i, 1);
                this.setState({comments: cmts});
            },
            updateComment: function(newText, i) {
                var cmts = this.state.comments;
                cmts[i] = newText;
                this.setState({comments: cmts});
            },
            eachComment: function(text, i) {
                return (<Comment key={i} index={i} updateCommentText={this.updateComment} deleteFromBoard={this.removeComment}>{text}</Comment>);
            },
            render: function() {
                return (
                    <div>
                        <div>
                            <input type="text" ref="newCommentText" className="form-control mb5px" required />
                            <button onClick={this.add} className="btn btn-default">Add New Comment</button>
                            <hr />
                        </div>
                        <div>{this.state.comments.map(this.eachComment)}</div>
                    </div>
                );
            }
        });

        ReactDOM.render(<Board />, document.getElementById('example'));
    </script>
</body>

</html>

Bình Luận