Giới thiệu Event Handling trong ReactJS.
Mã nguồn tham khảo:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title>Event Handling</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> </head> <body style="padding:20px"> <div id="example"></div> <script type="text/babel"> var Comment = React.createClass({ edit: function() { alert("Editing Comment!"); }, remove: function() { alert("Removing Comment!"); }, render: 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> ); } }); ReactDOM.render( <div> <Comment>Hey, my name is Hao!</Comment> <Comment>Holla my name!</Comment> <Comment>Wtf?</Comment> </div> , document.getElementById('example')); </script> </body> </html>