如何在 Reactjs 中禁用按鈕 onclick？

Question

我有一個條件，如果兩個文本字段相同，它將繼續進行，如果不是，則按鈕被禁用。 我知道我做錯了。

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

Answer 1

首先，不要檢查 onSubmit 而是檢查更改（您不想在提交后禁用它）對於您的輸入。 為 disabledButton 添加一個狀態值，並僅在兩個輸入相同（在 onChange 事件中）時才將其設置為 false。

您可以像這樣在 JSX 中設置禁用按鈕

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

Answer 2

你可以在你的render函數中做到這一點：

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

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

Answer 3

這將工作完美。 嘗試這個

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