forms - 如何在 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>