Redux Submitting a form from Presentation Component to Container Component - reactjs

Question

I am using a simple Login Form and i have LoginContainer (Container Component ) and Login (presentation component) and i am trying to submit the form and access the data in the Container Component.
Here is the code i have
Login.js:
export default class Login extends React.Component {
constructor() {
super();
}
render() {
return (
<div className="login jumbotron center-block">
<h1>Login</h1>
<form role="form">
<div className="form-group">
<label htmlFor="username">Username</label>
<input type="text" className="form-control" ref="username" placeholder="Username" />
</div>
<div className="form-group">
<label htmlFor="password">Password</label>
<input type="password" className="form-control" ref="password" placeholder="Password" />
</div>
<div className="form-group">
<button type="submit" className="btn btn-default" onClick={()=>{this.props.login(this.refs.username,this.refs.password)}}>Submit</button>
</div>
</form>
</div>
);
}
}
And the container component is:
class LoginContainer extends React.Component{
constructor(props){
super(props);
}
render(){
return(
<div>
<Login login={this.loginUser}/>
</div>
);
}
}
function mapStateToProps(state){
return state;
}
function mapDispatchToProps(dispatch){
return{
login : (username,password) => {
console.log('mapDispatchToProps : username=['+username+'] password=['+password+']');
}
}
}
export default connect(mapStateToProps,mapDispatchToProps)(LoginContainer);
The above code doesn't work as in the event handler for the submit i cannot access this.refs
Uncaught ReferenceError: refs is not defined
I don't want to maintain the state of Login Component. I can easily create state with username and password in Login and use setState with onclick or onchange on username and password controls.
Is there way i can send the data of form elements from Presentation component to Container component with a form submit ?
Thanks

Answer 1

You need to make event handling methods in Login.js file and bind them to the component context using bind function in the constructor.
export default class Login extends React.Component {
constructor() {
super();
this.login = this.login.bind(this);
}
login() {
this.props.login(this.refs.username,this.refs.password)
}
render() {
return (
<div className="login jumbotron center-block">
<h1>Login</h1>
<form role="form">
<div className="form-group">
<label htmlFor="username">Username</label>
<input type="text" className="form-control" ref="username" placeholder="Username" />
</div>
<div className="form-group">
<label htmlFor="password">Password</label>
<input type="password" className="form-control" ref="password" placeholder="Password" />
</div>
<div className="form-group">
<button type="submit" className="btn btn-default" onClick={this.login}>Submit</button>
</div>
</form>
</div>
);
}
}
This way you dont maintain state of Logic component, you simply use props passed from the container.