有条件地禁用按钮

Question

我正在尝试在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?上用alt方法发布了这个问题

Answer 1

设法解决了这个问题。发现缺少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')
);

Answer 2

在你的代码中，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>
    )