reactjs - use react to change css when selectors are typed out -

i'm trying create page similar this: samuel reed, css changing when selectors typed out. i've created onclick functions works want them i'm not sure how make them work without links. if point me in right direction, appreciated!

this code, i'm using reactjs

var colorchanger = react.createclass({   getinitialstate: function() {     return {       color: '#f00',       backgroundcolor: '#fff'     };   },   changecolor: function() {     this.setstate({       color: '#00f'     });   },   changebgcolor: function() {     this.setstate({       backgroundcolor: '#000'     });   },   changepadding: function() {     this.setstate({       padding: '10px'     });   },   changewidth: function() {     this.setstate({       width: '400px'     });   },   changemargin: function() {     this.setstate({       margin: '0 auto'     });   },   render: function(){     var style = {       color: this.state.color,       backgroundcolor: this.state.backgroundcolor,       padding: this.state.padding,       width: this.state.width,       margin: this.state.margin     };       return (           <div style={style}>               <a onclick={this.changecolor}>color: #00f;</a> <br />               <a onclick={this.changebgcolor}>backgroundcolor: #000;</a> <br />               <a onclick={this.changepadding}>padding: 10px;</a> <br />               <a onclick={this.changewidth}>width: 400px;</a> <br />               <a onclick={this.changemargin}>margin: 0 auto;</a>           </div>       );   }  });  react.render(<colorchanger />, document.getelementbyid('content')); 

i've created fiddle code

you should create input component changing state change input. since reactjs modular can use input code mixin on do. , change css input seen normal label/text.

also can textarea or, better, pre html element.

var input = react.createclass({      mixins: [colorstatesmixin], // import code here mixin.      getinitialstate: function () {         return {             value: ''         };     },      render: function () {         return (             <input {...this.getprops()} />         );     },      getprops: function () {         // return props here.         return {             onchange: this.setnewvalue         };     },      setnewvalue: function (event) {         this.setstate({value: event.target.value});     } }); 

this should similar work. need touches works. similar pre it's better input. 1 can change every input color.

edit: input it's not best selection. should textarea or pre , parse value following concept. when check code saw he's using others code typing effect.

you can use classnames module add classes dynamically code.