从（React）按钮中删除“禁用”后，onClick 不起作用

Question

const MIN_LENGTH = 6;
class Login extends React.Component {
  constructor() {
    super();
    this.state = {
      email: '',
      password: '',
      emailValid: false,
      passwordValid: false,
      // redirect: false,
    };

    this.handleEmail = this.handleEmail.bind(this);
    this.handlePassword = this.handlePassword.bind(this);
    this.handleClick = this.handleClick.bind(this);
  }

  componentDidUpdate() {
    this.handleButton();
  }

  handleEmail(ev) {
    const email = ev.target.value;
    const re = /^\w+([-+.']\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/;
    const isValid = re.test(email);
    if (isValid) {
      this.setState({ emailValid: true, email });
    } else {
      this.setState({ emailValid: false, email: '' });
    }
  }

  handlePassword(ev) {
    const size = ev.target.value.length;
    if (size >= MIN_LENGTH) {
      this.setState({ passwordValid: true, password: ev.target.value });
    } else {
      this.setState({ passwordValid: false, password: '' });
    }
  }

  handleButton() {
    const { emailValid, passwordValid } = this.state;
    const btn = document.getElementById('btnLogin');
    if (emailValid && passwordValid) {
      btn.disabled = false;
    } else {
      btn.disabled = true;
    }
  }

  handleClick(ev) {
    console.log(ev);
    ev.preventDefault();
    console.log('click!');
  }

  render() {
    const { email, password, emailValid, passwordValid } = this.state;
    if (emailValid && passwordValid) {
      console.log(`Email:${email}\nSenha:${password}`);
    }
    return (
      <section>
        <label htmlFor="email-input">
          Email
          <input type="email" data-testid="email-input" onChange={ this.handleEmail } />
        </label>
        <br />
        <label htmlFor="password-input">
          Password
          <input
            type="password"
            data-testid="password-input"
            onChange={ this.handlePassword }
          />
        </label>
        <br />
        <button
          type="button"
          id="btnLogin"
          onClick={ this.handleClick }
          disabled
        >
          Login
        </button>
      </section>
    );
  }
}

export default Login;

上面的代码是一个 React 组件，它将登录我的应用程序。重要的是要说验证工作正常，该按钮仅在一切顺利时才启用，但是单击按钮时没有任何反应。“handleEmail”功能具有通过正则表达式验证电子邮件有效性的作用，并且email 仅在组件状态有效时才会更改。 “handlePassword”函数仅检查输入的密码是否大于或等于 6。我将此信息存储在组件的状态中，但想法是将来使用“Redux”将此数据保存在全局状态中。我现在唯一的问题是按钮的 onClick 错误。

Answer 1

你不应该直接从 React 访问 dom 元素，因为 react 使用 js 控制每个组件，并且看不到你更改了 html 中的属性。你不应该做这样的事情：

handleButton() {
    const { emailValid, passwordValid } = this.state;
    const btn = document.getElementById('btnLogin');
    if (emailValid && passwordValid) {
        btn.disabled = false;
    } else {
        btn.disabled = true;
    }
}

您应该将属性添加到状态中，该属性存储按钮的状态。也就是，添加disabled 布尔属性并在处理程序中更改它。

您的按钮将如下所示：

<button ... disabled={this.state.buttonDisabled} />

您的 handleButton 将如下所示：

handleButton() {
    const { emailValid, passwordValid } = this.state;
    this.setState({
        buttonDisabled: !(emailValid && passwordValid)
    });
}