javascript - Using a variable as part of a `this.state` call ReactJS -


i'm attempting created form validation using react-bootstrap, , avoid making validation function each input.

i have input:

<input    hasfeedback    type="text"    label="username"    bsstyle={this.state.usernamestyle}    onchange={this.handlechange.bind(this, 'username')}    value={this.state.username}    bssize="large"    ref="inptuser"    placeholder="enter username" /> 

plus, have 2 function handle validation , updating of state:

handlechange: function(name, e) {   var state = {};   state[name] = e.target.value;   this.setstate(state);   var namestyle  = name + 'style';   this.setstate(this.validationstate(namestyle, e)); }, 

&

validationstate: function(style, event) {   var length = event.target.value.length;    if (length > 4) this.setstate({style: 'success'});   else if (length > 2) this.setstate({style: 'warning'});    return {style}; } 

at point if change style username can solution work specific input well. make if statement , depending on string in style can call appropriate setstate, better way this?

thanks!

handlechange should collect of information required change state , call setstate single time. vaslidationstate should not changing state. should returning new style:

validationstate(value) {     return (value.length > 4) ? "success" : (value.length > 2) ? "warning" : "error"; }  handlechange(name, e) {     const value = e.target.value;     const style = this.validationstate(value);     const stateupdates = {         [name]: value,         [`${name}style`]: style     };     this.setstate(stateupdates); } 

Comments

Popular posts from this blog

authentication - Mongodb revoke acccess to connect test database -

r - Update two sets of radiobuttons reactively - shiny -

ios - Realm over CoreData should I use NSFetchedResultController or a Dictionary? -