react+redux with react-bootstrap > FormControl > get value - reactjs

Question

I am using react+redux with react-bootstrap components.
I would like to pass the value of a FormControl text element (email) to the dispatched redux action but I do not know how to do that.
class LoginForm extends React.Component {
render() {
const email = React.findDOMNode(this.refs.email);
return (
<div>
<Form horizontal>
<FormGroup controlId="formHorizontalEmail">
<Col componentClass={ControlLabel}>Email</Col>
<Col><FormControl type="email" ref="email"/></Col>
</FormGroup>
<FormGroup>
<Col>
<Button type="submit" block>Sign in</Button>
</Col>
</FormGroup>
</Form>
<Button onClick={() => this.props.doLogin(email, 'password')}>Login</Button>
</div>
)
}
}
/**
* Connect staff.
*/
const mapStateToProps = (state) => {
return {
...
};
};
const mapDispatchToProps = (dispatch) => {
return {
doLogin: (email, password) => dispatch(performLogin(email, password))
};
};
export default connect(mapStateToProps, mapDispatchToProps)(LoginForm)

Answer 1

The only one way how to read text value of a FormControl with React (according to my research) is this:
class LoginForm extends React.Component {
handleOnChange = (event) => {
this.setState({ [event.target.id]: event.target.value }, null);
}
render() {
return (
<div>
<Form horizontal>
<FormGroup controlId="email">
<Col componentClass={ControlLabel}}>Email</Col>
<Col>
<FormControl type="email" placeholder="Email" onChange={this.handleOnChange}
/>
</Col>
</FormGroup>
<FormGroup controlId="password">
<Col componentClass={ControlLabel} sm={2}>Password</Col>
<Col>
<FormControl type="password" placeholder="Password" onChange={this.handleOnChange} />
</Col>
</FormGroup>
<FormGroup>
<Col>
<Button onClick={() => this.props.doLogin(this.state.email, this.state.password)}>Submit</Button>
</Col>
</FormGroup>
</Form>
</div>
)
}
}