I'm a React JS newbe. I have a very simple code which uses an alert
in a function that is supposed to be triggered by an onClick
. However, the event does NOT get triggered in Chrome (or any other browser). What am I missing? I've googled, and played around with the code, but just can't seem to figure it out.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>React - Template</title>
<script crossorigin src="https://unpkg.com/react@15/dist/react.min.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@15/dist/react-dom.min.js"></script>
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
</head>
<body>
<div id="container"></div>
<script type="text/babel">
var Comment = React.createClass({
edit: function () {
alert('Editing comment');
},
remove: function () {
console.log("Removing");
alert('Removing comment');
},
render: function () {
return (
<div className="commentContainer">
<div className="commentText">{this.props.children}</div>
<button onclick={this.edit} className="button-primary">Edit</button>
<button onclick={this.remove} className="button-danger">Remove</button>
</div>
);
}
});
ReactDOM.render(
<div className="board">
<Comment title="Blah">Blah</Comment>
</div>
, document.getElementById('container'));
</script>
</body>
</html>
It's onClick
, not onclick
. See https://facebook.github.io/react/docs/handling-events.html
React events are named using camelCase, rather than lowercase.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.