如何将两个按钮合并为一个？答案

【问题标题】：How to merge two buttons into one?如何将两个按钮合并为一个？
【发布时间】：2021-09-28 23:15:40
【问题描述】：

我有以下两个按钮，希望合并为一个。

    <div className="mt-8 mb-16">
      <button
        onClick={handlePurchase}
        type="button"
        // disabled='{this[id] <= 10}'
        className="inline-flex items-center px-16 py-3 border border-transparent text-base font-large elevation-15 rounded-md text-white bg-green-600
           hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-500"
      >
        Mint me a Marköbot!
      </button>
    </div>

    <div className="mt-8 mb-16">
      <button
        type="button"
        disabled='{this[id] <= 10}'
        className="inline-flex items-center px-16 py-3 border border-transparent text-base font-large elevation-15 rounded-md text-gray-500 bg-gray-300"
      >
        All Marköbot have been minted!
      </button>
    </div>

条件是this.id

这是我正在采取的另一种方法来解决Conditional disabling of button上发布的问题

非常感谢您的建议/帮助！

明显

【问题讨论】：

您尝试了哪些方法，哪些没有按预期工作？
“我尝试过使用三元内联” - 您在显示的代码中哪里尝试过？ “它返回一个未定义的错误” - 确切的错误是什么以及产生该错误的确切代码是什么？目前这个问题的意思是：“我尝试了一些东西，但它没有用，请为我做。”这不是我们在这里所做的。相反，如果您可以提供有关您遇到的特定问题的具体信息，那么我们可以帮助您理解和解决该问题。要了解有关此社区的更多信息以及我们如何为您提供帮助，请从 tour 开始并阅读 How to Ask 及其链接资源。
该答案中没有三元运算符，也不清楚该答案与您的问题有何关系。虽然一目了然的是，该答案中的代码将表达式传递给 disabled 属性，而您的代码将 string 传递给 disabled 属性。如果该属性需要一个布尔值，那么该字符串要么产生错误，要么被悄悄地解释为true，因为它是一个非空字符串。也许您想问的任何问题都只是拼写错误的结果，而您并不打算用引号括住该表达式？
三元是否禁用={this.id
"disabled={this.id - 显示的代码中没有。 “最后一组代码没有它” - 那是你要问的代码吗？您正在显示一些代码，但询问您未显示的其他一些代码？请说清楚。 “我想在按钮上方设置条件” - 你试过了吗？你遇到问题了吗？ “我在编写 JSX 时遇到问题” - 如果这是您要问的问题，那么请显示您正在使用的代码并描述您正在观察的问题。总的来说，这个问题还不清楚。

标签： reactjs button

【解决方案1】：

可以使用 JSX 回调执行相同的操作，而不是合并两个按钮。请参阅Conditional disabling of button 上其他帖子的解决方案

未定义的返回来自回调。它需要在（在这种情况下）传递给按钮之前绑定。

查看其他一些建议的方法：How to use ternary operator in the render method in reactjs?

【讨论】：