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>
Khóa học: React cho người mới bắt đầu