ReactJS Boostrap Condtional Render Tooltip On Disabled Button - PullRequest
Новая
       127

ReactJS Boostrap Condtional Render Tooltip On Disabled Button

0 голосов
/ 13 июля 2020

У меня есть кнопка, которая либо отключена, либо включена в зависимости от некоторых c logi. Это делается с помощью useEffect, например: 

useEffect(() => {
  if (selectedItems.length > 0) {
    selectedItems.forEach(function (item) {
      if (item.status === "FOR SALE") {
        setDisabledBuyItem(false)
      } else {
        setDisabledBuyItem(true)
      }
    })
  } else {
    setDisabledBuyItem(true)
  }
}, [selectedItems])

В основном у меня есть таблица со строками элементов. Если выбранный товар имеет статус «ПРОДАЖА», то кнопка, позволяющая человеку купить его, будет активна. Когда кнопка отключена, мне удалось установить на ней всплывающую подсказку, которая будет отображаться, когда пользователь наводит на нее курсор, говоря им, что можно купить только те предметы, которые выставлены на продажу, et c. Это отлично работает, например: 

<OverlayTrigger overlay={<Tooltip id="tooltip-disabled">Only items that have 'FOR SALE' can be purchased</Tooltip>}>
  <span className="d-inline-block">
    <Button variant="primary" disabled={disabledBuyItem} onClick={() => modalContext.modalHandler(buyItemLabel, <BuyItems selectedItems={selectedItems} buyItemsHandler={buyItemsHandler} />)}>
      {buyItemLabel}
    </Button>
    {' '}
  </span>
</OverlayTrigger>

Когда в таблице выбрана строка с надписью «ПРОДАЖА» и кнопка становится активной, я не хочу, чтобы всплывающая подсказка больше отображалась. Я застрял в том, как это сделать. Я подумывал поместить все это в условную оболочку, но не знаю, как применить это к всплывающей подсказке.

...