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>