javascript - Binding events handlers for React template rendered on server side -

in order head around react.js, i'm working on simple noticeboard app renders views on both client , server side. unfortunately, i've hit snag.

the file components/index.jsx looks this:

var react = require('react');  var notice = react.createclass({   render: function () {     return (         <div classname="noticeitem">           {this.props.text}         </div>     );   } });  var noticeform = react.createclass({   handlesubmit: function (event) {     event.preventdefault();     console.log('running');   },   render: function () {     return (       <form classname="noticeform" onsubmit={this.handlesubmit}>         <div classname="form-group">           <textarea classname="form-control" placeholder="your notice..." ref="text" />         </div>         <input type="submit" classname="btn btn-primary" value="post" />       </form>     );   } });  var index = react.createclass({   render: function () {     var noticenodes = this.props.notices.map(function (notice, index) {       return (           <notice key={index} text={notice.text}>           </notice>       );     });     return (         <div>           <h1>noticeboard</h1>           <noticeform />           <div classname="noticelist">             {noticenodes}           </div>         </div>     );   } });  module.exports = index; 

it renders fine on server side, note handlesubmit() method of noticeform doesn't bound onsubmit event, seems logical. i'm loading compiled template file when page loads, how can apply on page load? it's not clear documentation how so.

the full source code here, although haven't committed handlesubmit() method yet.

you need re-render component on client side. think doing right taking got server , dumping in

<div id='view' dangerouslysetinnerhtml={{__html: this.props.body}} />  

to event handlers bind should like

var container = document.getelementbyid('view'); var component = yourcomponent here react.rendercomponent(component, container); 

taking @ api doc not unmount domnodes , redraw. should attach necessary event handlers

https://facebook.github.io/react/docs/top-level-api.html

if call react.render() on node has server-rendered markup, react preserve , attach event handlers, allowing have performant first-load experience.