如何在 Reactjs 中禁用按钮 onclick？

Question

I had a condition if the two textfield are the same it will proceed, if not then the button is disabled. I know I'm doing this wrong.

onSubmit() {
        debugger
        if  (this.state.password == this.state.password2)
            alert('same');
        else 
            alert('error');
            this.disable;
}

Answer 1

First, dont check onSubmit but on change (you dont want to disable it AFTER it was submitted) for both your input. Add a state value for your disabledButton, and set it to false only if both input are the same (in the onChange event).

You can set disabled button inside your JSX like this

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

Answer 2

You can do that in your render function:

render() {
  const submitDisabled = this.state.password !== this.state.password2

  return (
    // ...
      <button disabled={submitDisabled}>Submit</button>
    // ...
  )
}

Answer 3

This will work Perfect. Try this

render() {
  const submitDisabled = password.length > 0
  return (
    // ...
      <button disabled={submitDisabled}>Submit</button>
    // ...
  )
}