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
Post a Comment