Question

我有以下问题。我需要禁用按钮，对于disabled道具，我通过函数来控制此行为。由于某种原因，它从未被调用。我的代码是这样的：

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

只有很少的语法错误可以解决此问题-首先，如下所示将括号()添加到this.isValid，以将isValid作为函数执行（而不是以变量）。另外，删除)和}之间的多余括号>：

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

Answer 2

disabled应该设置为true或false。调用您的函数并从中返回true或false。

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


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

在从未调用的禁用道具上反应组件功能

2 个答案: