javascript - React JS event handler not responding -
i'm react js newbe. have simple code uses alert in function supposed triggered onclick. however, event not triggered in chrome (or other browser). missing? i've googled, , played around code, can't seem figure 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 named using camelcase, rather lowercase.
Comments
Post a Comment