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'));

Comments

Post a Comment

Popular posts from this blog

android - InAppBilling registering BroadcastReceiver in AndroidManifest -

i'm implementing inapp billing in android app. works well, however, i'm trying decouple broadcast receiver activity manifest. suggestion in android's trivialdrive sample: // important: dynamically register broadcast messages updated purchases. // register receiver here instead of <receiver> in manifest // because call getpurchases() @ startup, therefore can ignore // broadcasts sent while app isn't running. // note: registering listener in activity bad idea, done here // because sample. regardless, receiver must registered after // iabhelper setup, before first call getpurchases(). currently there's class extends broadcastreceiver : public class iabbroadcastreceiver extends broadcastreceiver { /** * intent action receiver should filter for. */ public static final string action = "com.android.vending.billing.purchases_updated"; private final iabbroadcastlistener mlistener; public iabbroadcastreceiver(iabbroadcastlistener listener) { m...
Read more

python Tkinter Capturing keyboard events save as one single string -

is possible store keyboard events 1 string? code below stores 1 char , prints it. card reader or bar code reader, contains collection of character/ string not 1 character @ time. goal save char pressed text variable. from tkinter import * root = tk() def key(event): text= event.char text+= event.char print ("pressed", text) def callback(event): frame.focus_set() print ("clicked at", event.x, event.y) frame = frame(root, width=100, height=100) frame.bind("<key>", key) frame.bind("<button-1>", callback) frame.pack() root.mainloop() currently, creating text variable , everytime key() function gets called, , text stores last character typed. you can define text module level variable , , use module level text inside key function - text = '' def key(event): global text text+= event.char print("pressed", text)
Read more

sql server - Why does Linq-to-SQL add unnecessary COUNT()? -

here tables: create table customer ( cid int primary key, name varchar(32) ) create table ord ( oid int primary key, cid int foreign key references customer, address varchar(20) ) here's linq-to-sql statement: var aaa = c in db.customer select new { c, o = c.ord.tolist() }; and here's inexplicable query generated linq-to-sql: select [t0].[cid] [cid], [t0].[name] [name], [t1].[oid] [oid], [t1].[cid] [cid2], [t1].[address] [address], (select count(*) [dbo].[ord] [t2] [t2].[cid] = [t0].[cid]) [value] [dbo].[customer] [t0] left outer join [dbo].[ord] [t1] on [t1].[cid] = [t0].[cid] order [t0].[cid], [t1].[oid] i want understand how rid of count(*) part. it's entirely uncalled for! linq needs count(*) in order determine number of entries returned o = c.ord.tolist() .
Read more