reactjs - Use React-Redux To Develop a Login Page -

i try use react-redux develope login page , encounter problems.

i want send textfields account , password server ajax, when click login button, login button can not value of textfields.

i not want use "form tag" , try best solve problem myself, still suspect solution, want find advise problem.

my solution following

textfields trigger action set login info next state. login button send these info server only.

the following part of codes.

textfield:

class baseinputcomponent extends react.component {     constructor(props) {         super(props);         this._handlechange = this._handlechange.bind(this);     }      _handlechange(e) {         this.props.onchange({infotype: this.props.datatype, data: e.target.value})     }      render() {         var style = {             marginbottom: 30         };          return (             <div style={style}>                 <textfield                     hinttext={ this.props.hinttext }                     floatinglabeltext={ this.props.floatinglabeltext }                     type={ this.props.type }                     onchange={ this._handlechange }                     value={this.props.textfield}                 />             </div>         );     } } 

a login page

class userpapercomponent extends react.component {      constructor(props) {         super(props);     }      handleclickbtn() {         this.props.actions.userlogin()     }      render() {         var style = {             padding: 20,             textalign: 'center',         };          return (             <paper style={style} zdepth={5}>                 <userpapertitlecomponent text={this.props.userpapertext}/>                 <divider />                 <baseinputcomponent datatype="useraccount" textfield={this.props.userinfo.useraccount} onchange={ this.props.actions.setuserinfo } floatinglabeltext="account"/>                 <baseinputcomponent datatype="userpwd" textfield={this.props.userinfo.userpwd} onchange={ this.props.actions.setuserinfo }  floatinglabeltext="password" type="password"/>                 <divider />                 <br />                 <raisedbutton label={this.props.userpapertext} onmouseup={ this.handleclickbtn } />             </paper>         );     } } 

in reduce

const initialstate = {   useraccount: '',   userpwd: '',   userhadlogin: false };  module.exports = function(state = initialstate, action) {   /* keep reducer clean - not mutate original state. */   //let nextstate = object.assign({}, state);    switch(action.type) {      case 'set_user_info': {       console.log(action.paras)       let nextstate = object.assign({}, state);       nextstate[action.paras.infotype] = action.paras.data;       return nextstate;     } break;      case 'user_login': {       // modify next state depending on action , return       let nextstate = object.assign({}, state);       nextstate.userhadlogin = true;       return nextstate;     } break;      case 'user_logout': {       // modify next state depending on action , return       let nextstate = object.assign({}, initialstate);       return nextstate;     } break;      default: {       /* return original state if no actions consumed. */       return state;     }   } } 

try binding binding handler "this" <raisedbutton label={this.props.userpapertext} onmouseup={ this.handleclickbtn.bind(this) } />