javascript - How to use Reactjs event handlers instead of jQuery event handlers on this select menu example? -

this first question on stackoverflow, please patient.

i started learning reactjs few days ago , there still few things not clear me.

how replace jquery event handlers reactjs?

i'm working on little select menu made using jquery , want use reactjs component , tried manage

$('.select').click(function(e) {   e.preventdefault();   e.stoppropagation();   $(this).toggleclass('expanded');   $('#'+$(e.target).attr('for')).prop('checked',true); });  $(document).click(function() {   $('.select').removeclass('expanded'); }); 

please check full code here: https://codepen.io/wael-alsabbouh/pen/gvwvzv

this have done in reactjs still not working properly!

import react 'react';  export default class select extends react.component { /**  * show , hide select options  */ constructor(props) {     super(props);     this.state = { addclass: false, value: '', istoggleon: true };     this.handleclick = this.handleclick.bind(this);     this.handlechange = this.handlechange.bind(this); }  handleclick() {     this.setstate(prevstate => ({         istoggleon: !prevstate.istoggleon,         addclass: !this.state.addclass,     })); }  handlechange(e) {     this.setstate({         value: e.target.value,     });     e.preventdefault(); } /**  * react render  */ render() {     const classnames = ['select'];     if (this.state.addclass) {         classnames.push('expanded');     }     return (         <div classname={classnames.join(' ')} >             <input type="radio" name="sorttype" value={this.handlechange} checked="checked" id="selected-item" onclick={this.handleclick} /><label htmlfor="selected-item">item 00</label >             <input type="radio" name="sorttype" value={this.handlechange.value} onchange={this.handlechange} /><label htmlfor="item01">item 01</label>             <input type="radio" name="sorttype" value={this.handlechange.value} onchange={this.handlechange} /><label htmlfor="item02">item 02</label>             <input type="radio" name="sorttype" value={this.handlechange.value} onchange={this.handlechange} /><label htmlfor="item03">item 03</label>             <input type="radio" name="sorttype" value={this.handlechange.value} onchange={this.handlechange} /><label htmlfor="item04">item 04</label>             <input type="radio" name="sorttype" value={this.handlechange.value} onchange={this.handlechange} /><label htmlfor="item05">item 05</label>         </div>     );   } } 

thank in advance.

in less file remove this

&:nth-child(2) {           margin-top: 2em;           border-top: .06em solid #d9d9d9;         }       } 

it'd better wrap radio button in own higher order component , let maintain own state. created new radio class(i'm not creative namer) example.

   /*    * simple react component    */    class select extends react.component {   constructor(props) {         super(props);         this.state = { addclass: false, value: '', istoggleon: true };         this.handleclick = this.handleclick.bind(this);         this.handlechange = this.handlechange.bind(this);     }      handleclick() {     console.log("hello")         this.setstate(prevstate => ({             istoggleon: !prevstate.istoggleon,             addclass: !this.state.addclass,         }));     }      handlechange(e) {         this.setstate({             value: e.target.value,         });         e.preventdefault();     }   render() {     const classnames = ['select'];         if (this.state.addclass) {             classnames.push('expanded');         }     return <div classname={classnames.join(' ')} onchange={this.handlechange}>                 <input type="radio" name="sorttype" value={this.handlechange.value} checked="checked" id="selected-item" onclick={this.handleclick} /><label htmlfor="selected-item">item 00</label>                 <radio name={"item01"}/>                 <radio name={"item02"}/>                 <radio name={"item03"}/>                 <radio name={"item04"}/>                 <radio name={"item05"}/>             </div>   } }   class radio extends react.component {   constructor(props) {         super(props);         this.state = { ison:props.ison?true:false };         this.togglestate=this.togglestate.bind(this)     }   togglestate(){     console.log("look @ me i'm changing own state "+this.props.name+"!!!!")     this.setstate({ison:!this.state.ison})    }     render() {     return <span><input type="radio" name="sorttype" value={this.state.ison} /><label onclick={this.togglestate}  htmlfor={this.props.name}>{this.props.name}</label></span>   }  } /*  * render above component div#app  */ react.render(<select />, document.getelementbyid('app'));