ReactJS: Page update after login -


im new reactorjs, trying develop simple login example. in example after button click page not updating new component. when click submit button should update page regardless of user credentials.

    var userauthentication = react.createclass({         getinitialstate: function() {             return {signin: false};         },         handlesubmit: function() {             this.state.signin = true;         },       render: function() {         return (          <div>           {(this.state.signin              ? <user />                   :<form>               <div classname="usernamein">                 <label>username :</label>                    <input type="text" ref="username"/>                    </div>                    <div classname="userpasswordin">                     <label>password :</label>                     <input type="password" ref="userpassword"/>                     </div>                     <div>                     <button type="submit" onclick= this.handlesubmit}>sign in</button>                     </div>                </form>                 )}                 </div>         );       }     });  var user = react.createclass({   render: function() {     return (       <div classname="username">         <label>user in...</label>       </div>     );   } }); 

firstly, better practice put handler not on click action of submit button, on form — by passing onsubmit prop. way triggered not button press, also, example, pressing enter on form field.

<form onsubmit = { this.handlesubmit }>  {...} </form> 

secondly, setting state object 1 want won't — react doesn't work way , ignore statement. have use setstate function, this:

handlesubmit: function() {    this.setstate({ signin: true }); } 

Comments

Popular posts from this blog

powershell Start-Process exit code -1073741502 when used with Credential from a windows service environment -

twig - Using Twigbridge in a Laravel 5.1 Package -

c# - LINQ join Entities from HashSet's, Join vs Dictionary vs HashSet performance -