有条件地禁用按钮答案

【问题标题】：Conditional disabling of button有条件地禁用按钮
【发布时间】：2021-09-28 11:24:54
【问题描述】：

我试图在 ID 达到某个数字（例如 7）后自动禁用按钮。代码已编译但无法执行，即根据条件禁用按钮。使用 React 和 Tailwind。

    <div className="mt-8 mb-16">
      <button
        id="BTS"
        onClick={handlePurchase}
        type="button"
        disabled={this.id >= 7 }
        className="inline-flex items-center ... "
      >
        Mint me a Marköbot!
      </button>
    </div>

应用程序的源代码位于（第 103 行）

非常感谢！

在How to merge two buttons into one? 上使用替代方法发布了问题

【问题讨论】：

通常禁用属性的值为禁用
什么不起作用？

标签： reactjs button disable

【解决方案1】：

使用您的代码，this.id 是指按钮 ID 吗？为什么不使用附加状态来进行条件禁用？

我看过你的代码，你使用函数组件，我假设this.id 是按钮 id

您可以创建新状态并将该状态用作条件，例如

    const [buttonId, setButtonId] = React.useState(null)

    return(
        <button
          id="BTS"
          onClick={handlePurchase}
          type="button"
          disabled={buttonId >= 7 }
          className="inline-flex items-center ... "
        >
          Mint me a Marköbot!
        </button>
    )

【讨论】：

嗨，Ega。感谢您的回复。 this.id 指的是智能合约当前正在铸造的 NFT ID。一旦 NFT（由智能合约上的 ID 索引）达到某个数字（这将取决于通过合约生成的 NFT 的数量），我正在寻找一种禁用按钮的方法。应用程序输出位于 botdapp.netlify.app。
无论如何要使中的这个内联代码工作？ ....禁用={this.id
我认为它不需要 lambda 表达式来返回 false 和 true，因为 this.id <= 6 已经返回布尔值

【解决方案2】：

设法解决了这个问题。发现 handleClick 部分丢失，这是内联渲染“this”所必需的。感谢所有提出建议的人。如果您有更简单的解决方案，请分享。

class Toggle extends React.Component {
  constructor(props) {
    super(props);
    this.id = 0;
    this.handleClick = this.handleClick.bind(this);
  }

handleClick() {
  this.setState(prevState => ({
    isToggleOn: !prevState.isToggleOn
  }));
}

render() {
  return (
    <button onClick={this.handleClick}
      disabled={this.id <= 9 ? true : false}>
        {this.id <= 9 ? 'X' : 'Y'}
    </button>
  );
}
}

ReactDOM.render(
  <Toggle />,
  document.getElementById('root')
);

【讨论】：