javascript - 禁用 Prop 上的 react 组件功能从未被调用

Question

我有以下问题。我需要禁用按钮并为 disabled Prop 传递函数来控制此行为。由于某种原因，它永远不会被调用。我的代码是这样的:

isValid = () => { 
  //conditions 
}

createNextButton = () => {
  return(
    <button disabled={!this.isValid})>next</button>
  )
}

createBackButton = () => {
  //similar as next button
}

generateButtons = () => (
  <div>
    {this.createBackButton()}
    {this.createNextButton()}
  </div>
)

render() {
  return(
    //something
    <div>
      {this.generateButtons()}
    </div>
)}

我的代码的相关部分大致如下所示。除了 isValid 函数外，所有的东西都被调用了，我不知道为什么。我错过了什么吗？

Answer 1

禁用应设置为真或假。 调用您的函数并从中返回 true 或 false。

isValid = () => { 
  //conditions 
// return true or false
}


<button disabled={!this.isValid()}>next</button>