React.Js — FormControl не обновляет мое значение

В настоящее время я работаю над стороной входа в свое приложение для реагирования, и у меня возникла проблема с обновлением данных моего состояния из ввода.

У меня есть этот компонент:

import React from 'react'
import { login } from '../../api/Authentication'
import { setStore } from '../../webapp/storage'
import { Button, ControlLabel, Form, FormControl, FormGroup } from 'react-bootstrap';


export default class LoginPage extends React.Component {

    constructor(props){
        super(props);
        this.state={
            email:'',
            password:''
        }
    }

    handleSubmit(event) {

        if (this.state.email == '' || this.state.password == '') {
            if (this.state.email == '') {
                this.badInfosAlert('Email field empty')
            } else if (this.state.password == '') {
                this.badInfosAlert('Password field empty')
            }
            return
        }

        console.log('-----------------------')
        console.log(this.state.email)
        console.log(this.state.password)
        var user = {
            email: this.state.email,
            password: this.state.password
        }
        console.log(JSON.stringify(user))
        console.log('-----------------------')

        login(user).then(result => {
            if (result != null && result.status == 200) {
                setStore('token', result.json.user.token)
            } else {
                this.badInfosAlert(result.json.error)
            }
        }).catch(this.badInfosAlert('An error happend'));
    }

    badInfosAlert(message) {
        console.log(message);
        alert(message);
    }

    render() {
        return (
            <div className='col-lg-12'>
                <Form>
                    <FormGroup controlId="formHorizontalEmail">
                        <ControlLabel>Email </ControlLabel>
                        <FormControl type="username" onChange = {(event,newValue) => this.setState({email:newValue})} placeholder="Email" />
                    </FormGroup>
                    <FormGroup controlId="formHorizontalPassword">
                        <ControlLabel>Password </ControlLabel>
                        <FormControl type="password" onChange = {(event,newValue) => this.setState({password:newValue})} placeholder="Password" />
                    </FormGroup>
                    <Button onClick={(event) => this.handleSubmit(event)}>Login</Button>
                </Form>
            </div>
        )
    }
}

Дело в том, что каждый раз, когда я нажимаю кнопку «Отправить», мой адрес электронной почты/пароль в состоянии равен нулю, даже если поля заполнены, почему так?

Я все еще супер новичок в JavaScript (а не просто реагирую), поэтому, пожалуйста, объясните свой ответ как можно подробнее :)

Спасибо !