Подсказка не работает внутри списка должным образом - PullRequest
Новая
       14

Подсказка не работает внутри списка должным образом

0 голосов
/ 08 ноября 2018

Мне нужно показать всплывающую подсказку на кнопках, присутствующих в списках. На рисунке ниже вы можете увидеть группу кнопок (которыми можно манипулировать, поскольку данные поступают из БД каждый раз).

Но проблема в том, что на рисунке ниже вы можете видеть, что кнопка в списках показывает всплывающую подсказку только для кнопок, присутствующих в первом ряду, а при наведении курсора на кнопки из второго ряда подсказка не показывает подсказку.

Я хочу показать всплывающую подсказку для всех кнопок. Может кто-нибудь сказать, что я сделал не так в этом? Я добавил свой код под картинкой.

enter image description here

{
  Object.keys(chitties).map((key, index) => {
    return (
      <tr key={key}>
        <td>{index + 1}</td>
        <td>{chitties[key].chittyName}</td>
        <td>{moment(chitties[key].startDate).format("DD-MM-YYYY")}</td>
        <td>{chitties[key].psoId}</td>
        <td>{chitties[key].auctionDay}</td>
        <td>{chitties[key].totalMonth}</td>
        <td>{numberFormat(chitties[key].totalAmount)}</td>
        <td>
          <Link
            to={`/chitties/list/${this.props.match.params.id}/detail/${key}`}
          >
            <Button
              color="primary"
              className="btn-pill"
              id="UncontrolledTooltipExample"
            >
              <i className="fa fa-eye" />
            </Button>
            <UncontrolledTooltip
              placement="top"
              target="UncontrolledTooltipExample"
            >
              Hello world!
            </UncontrolledTooltip>
          </Link>
          &nbsp;&nbsp;
          <Link to={`/chitties/list/${this.props.match.params.id}/edit/${key}`}>
            <Button
              color="secondry"
              className="btn-pill"
              id="UncontrolledTooltip"
            >
              <i className="fa fa-pencil" />
            </Button>
            <UncontrolledTooltip placement="top" target="UncontrolledTooltip">
              Hello world!
            </UncontrolledTooltip>
          </Link>
          &nbsp;&nbsp;
          <Link to={`/chitties/${key}/addUser`}>
            <Button
              color="success"
              className="btn-pill"
              id="UncontrolledToolti"
            >
              <i className="fa fa-user-plus" />
            </Button>
            <UncontrolledTooltip placement="top" target="UncontrolledToolti">
              Hello world!
            </UncontrolledTooltip>
          </Link>
          &nbsp;&nbsp;
          <Link to={`/chitties/${this.props.match.params.id}/auction/${key}`}>
            <Button color="danger" className="btn-pill" id="UncontrolledTool">
              <i className="fa fa-calendar-plus-o" />
            </Button>
            <UncontrolledTooltip placement="top" target="UncontrolledTool">
              Hello world!
            </UncontrolledTooltip>
          </Link>
          &nbsp;&nbsp;
          <Link
            to={`/chitties/${this.props.match.params.id}/paymentList/${key}`}
          >
            <Button color="warning" className="btn-pill" id="Uncontrolle">
              <i className="fa fa-inr" />
            </Button>
            <UncontrolledTooltip placement="down" target="Uncontrolle">
              Hello world!
            </UncontrolledTooltip>
          </Link>
        </td>
      </tr>
    );
  });
}

1 Ответ

0 голосов
/ 08 ноября 2018

Это связано с тем, что идентификаторы, используемые для запуска всплывающего окна, не являются уникальными при отображении списка элементов.

Вы можете решить эту проблему, добавив key, который вы используете, к упомянутым идентификаторам: 

<Button
  color="primary"
  className="btn-pill"
  id={`tooltip1-${key}`}
>
 <i className="fa fa-eye" />
</Button>
<UncontrolledTooltip
  placement="top"
  target={`tooltip1-${key}`}
 >

Полный код: 

{
  Object.keys(chitties).map((key, index) => {
    return (
      <tr key={key}>
        <td>{index + 1}</td>
        <td>{chitties[key].chittyName}</td>
        <td>{moment(chitties[key].startDate).format("DD-MM-YYYY")}</td>
        <td>{chitties[key].psoId}</td>
        <td>{chitties[key].auctionDay}</td>
        <td>{chitties[key].totalMonth}</td>
        <td>{numberFormat(chitties[key].totalAmount)}</td>
        <td>
          <Link
            to={`/chitties/list/${this.props.match.params.id}/detail/${key}`}
          >
            <Button
              color="primary"
              className="btn-pill"
              id={`tooltip1-${key}`}
            >
              <i className="fa fa-eye" />
            </Button>
            <UncontrolledTooltip
              placement="top"
              target={`tooltip1-${key}`}
            >
              Hello world!
            </UncontrolledTooltip>
          </Link>
          &nbsp;&nbsp;
          <Link to={`/chitties/list/${this.props.match.params.id}/edit/${key}`}>
            <Button
              color="secondry"
              className="btn-pill"
              id={`tooltip2-${key}`}
            >
              <i className="fa fa-pencil" />
            </Button>
            <UncontrolledTooltip placement="top" target={`tooltip2-${key}`}>
              Hello world!
            </UncontrolledTooltip>
          </Link>
          &nbsp;&nbsp;
          <Link to={`/chitties/${key}/addUser`}>
            <Button
              color="success"
              className="btn-pill"
              id={`tooltip3-${key}`}
            >
              <i className="fa fa-user-plus" />
            </Button>
            <UncontrolledTooltip placement="top" target={`tooltip3-${key}`}>
              Hello world!
            </UncontrolledTooltip>
          </Link>
          &nbsp;&nbsp;
          <Link to={`/chitties/${this.props.match.params.id}/auction/${key}`}>
            <Button color="danger" className="btn-pill" id={`tooltip4-${key}`}>
              <i className="fa fa-calendar-plus-o" />
            </Button>
            <UncontrolledTooltip placement="top" target={`tooltip4-${key}`}>
              Hello world!
            </UncontrolledTooltip>
          </Link>
          &nbsp;&nbsp;
          <Link
            to={`/chitties/${this.props.match.params.id}/paymentList/${key}`}
          >
            <Button color="warning" className="btn-pill" id="Uncontrolle">
              <i className="fa fa-inr" />
            </Button>
            <UncontrolledTooltip placement="down" target="Uncontrolle">
              Hello world!
            </UncontrolledTooltip>
          </Link>
        </td>
      </tr>
    );
  });
}
...