如何根據Material Design Lite中的表單內容啓用/禁用提交按鈕？

Question

我有一個默認禁用的登錄表單提交按鈕。我想在用戶輸入有效的用戶名/密碼時啓用它。有很多使用AngularJS，JQuery和其他基礎設施的例子，但是我想知道使用Material Design Lite做一個乾淨的方法。我當前的代碼是：

class FrontPage extends Component { 
    constructor(props, context) { 
    super(props, context); 
    this.state = { email: '', password: '' }; 
    } 

    handleEmailChange() { 
    this.setState({email: e.target.value}) 
    } 

    handlePasswordChange() { 
    this.setState({password: e.target.value}) 
    } 

    render() { 
    return(
    <form className="frontpage" onSubmit={this.handleLogin}> 
     <div className="content-grid mdl-grid"> 
     <div className="mdl-cell mdl-textfield mdl-js-textfield"> 
      <input className="mdl-textfield__input" id="email" type="email" value={this.state.email} onChange={this.handleEmailChange}/> 
      <label className="mdl-textfield__label" htmlFor="email">email...</label> 
      <span className="mdl-textfield__error">Input is not an email address!</span> 
     </div> 
     <div className="mdl-cell mdl-textfield mdl-js-textfield"> 
      <input className="mdl-textfield__input" id="password" type="password" pattern="[A-Z,a-z,0-9\?@\$%&\*\-_=+! ~\.,\/\\]*" value={this.state.password} onChange={this.handlePasswordChange}/> 
      <label className="mdl-textfield__label" htmlFor="password">password...</label> 
      <span className="mdl-textfield__error">Input can only contain letters, numbers, and some special characters!</span> 
     </div> 

     <div classname="mdl-cell"> 
      <button className="mdl-button mdl-button--raised mdl-button--colored mdl-js-ripple-effect" type="submit" name="login" disabled>Login</button> 
     </div> 
     </div> 
    </form> 
) 
} 

}

Answer 1

<button id='loginBtn' className="mdl-button mdl-button--raised mdl-button--colored mdl-js-ripple-effect" type="submit" name="login" disabled>Login</button> 

<script> 
    function Enable() { 
     var loginBtn = document.getElementById('loginBtn'); 
     loginBtn.removeAttribute("disabled"); 
     componentHandler.upgradeElement(loginBtn); 
    } 

    function Disable() { 
     var loginBtn = document.getElementById('loginBtn'); 
     loginBtn.setAttribute("disabled",""); 
     componentHandler.upgradeElement(loginBtn); 
    } 
</script>